PanelKit | JavaScript Window Design

function WindowIframe({ src, title, footer }) {
    const [isInteracting, setIsInteracting] = useState(false);
    const [reloadKey, setReloadKey] = useState(0);

return (
        <Card className="bg-white/5 border-white/10 backdrop-blur-sm overflow-hidden">
            <div className="flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-white/5">
                <div className="flex gap-1.5 shrink-0">
                    <span className="w-3 h-3 rounded-full bg-red-500/80" />
                    <span className="w-3 h-3 rounded-full bg-yellow-500/80" />
                    <span className="w-3 h-3 rounded-full bg-green-500/80" />
                </div>

<Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 text-slate-400 hover:text-white hover:bg-white/10"
                    onClick={() => setReloadKey((key) => key + 1)}
                    aria-label={`Reload ${title}`}
                >
                    <RefreshCw className="w-4 h-4" />
                </Button>

<CardContent className="p-0">
                <div
                    className="relative w-full h-[60vh] md:h-[80vh] bg-black/30"
                    onMouseLeave={() => setIsInteracting(false)}
                >
                    <button
                        type="button"
                        className={`absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 bg-black/45 backdrop-blur-[2px] transition-all duration-300 ${
                            isInteracting
                                ? 'opacity-0 pointer-events-none'
                                : 'opacity-100 hover:bg-black/35'
                        }`}
                        onClick={() => setIsInteracting(true)}
                    >
                        <span className="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/10 px-4 py-2 text-sm font-medium text-white">
                            <MousePointer2 className="w-4 h-4" />
                            Click to interact
                        </span>
                    </button>

{footer && (
                <CardFooter className="py-2 px-4 bg-white/5 border-t border-white/10 flex justify-end">
                    {footer}
                </CardFooter>
            )}
        </Card>
    );
}