import { Maximize, Minimize } from "lucide-react";
import { useState } from "react";
import { Button } from "../ui/button";

export default function FullscreenButton() {

    const [isFullscreen, setIsFullscreen] = useState(false);

    const toggleFullscreen = async () => {
        const el = document.documentElement;

        if (!document.fullscreenElement) {
            await el.requestFullscreen();
            setIsFullscreen(true);
        } else {
            await document.exitFullscreen();
            setIsFullscreen(false);
        }
    };

    return (
        <Button onClick={toggleFullscreen} size='icon-sm' variant='ghost'>
            {isFullscreen ? <Minimize /> : <Maximize />}
        </Button>
    );
}