import Link from "next/link";

export type NavigationProps = {
    navigationOpen: boolean;
    closeNavigation: () => void;
}

export default function Navigation({
    navigationOpen,
    closeNavigation,
}: NavigationProps) {
    const logout = async () => {
        await fetch('/api/logout', {
            method: 'POST'
        });

        window.location.href = '/login';
    };

    return <>
        {navigationOpen && <div className="absolute top-0 left-0 z-10 w-screen h-screen bg-black opacity-50" onClick={closeNavigation}></div>}

        <nav className={`absolute top-0 left-0 w-[70vw] h-screen ${navigationOpen ? 'translate-x-0' : '-translate-x-full'} z-20 bg-white flex flex-col gap-5 p-5`}>
            <Link
                className="bg-blue-500 text-white text-lg px-4 py-2 rounded"
                href="/"
                onClick={() => closeNavigation()}
            >
                Scan
            </Link>

            <Link
                className="bg-blue-500 text-white text-lg px-4 py-2 rounded"
                href="/stats"
                onClick={() => closeNavigation()}
            >
                Statistics
            </Link>

            <button className="bg-blue-500 text-white text-lg px-4 py-2 rounded mt-auto" onClick={logout}>
                Logout
            </button>
        </nav>
    </>;
}