useFullscreen

"use client";

import { useFullscreen } from "@zentauri-ui/zentauri-components/hooks/useFullscreen";
import { Button } from "@zentauri-ui/zentauri-components/ui/buttons";
import { HookDemoPanel } from "@/components/preview/hooks/demo-panel";
import { useRef } from "react";

export default function HookDemo() {
  const fullscreenTargetRef = useRef<HTMLDivElement>(null);
  const { isFullscreen, isSupported, toggle } = useFullscreen(fullscreenTargetRef);
  return (
    <HookDemoPanel title="Interactive demo">
      <p className="mb-4 text-sm text-slate-400">
        {isSupported
          ? "Expand the panel below to fullscreen — pressing Esc exits and the state stays correct."
          : "The Fullscreen API is not available in this browser."}
      </p>
      <div ref={fullscreenTargetRef} className="mt-4 flex h-48 flex-col items-center justify-center gap-3 rounded-lg border border-white/10 bg-slate-900/50 text-slate-300">
        <p className="text-sm">
          {isFullscreen ? "You are viewing this panel in fullscreen." : "This panel goes fullscreen."}
        </p>
        <Button type="button" onClick={() => toggle()} disabled={!isSupported}>
          {isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
        </Button>
      </div>
    </HookDemoPanel>
  );
}