import { usePage } from '@inertiajs/react';

import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import useLocalSettingsStore from '@/stores/localSettingsStore';

export default function EditNavSidebar({ isOpen, onClose }) {
    const { auth } = usePage().props;

    const { getSetting, setSetting } = useLocalSettingsStore();

    return (
        <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
            <SheetContent side="left" className="w-50 overflow-y-auto">
                <SheetHeader>
                    <SheetTitle className="flex items-center gap-3">
                        <div className="font-display ml-0 text-lg tracking-wide md:ml-3 md:text-xl">MEMEAIGEN</div>
                    </SheetTitle>
                </SheetHeader>

                <div className="space-y-3">
                    <div className="grid px-2">
                        {/* {!auth.user && <Button variant="outline">Join Now</Button>}
                        {!auth.user && <Button variant="link">Login</Button>} */}
                    </div>

                    <div className="grid px-2">
                        <Button
                            onClick={() => {
                                window.location.href = route('home');
                            }}
                            variant="link"
                        >
                            Home
                        </Button>
                    </div>
                </div>
            </SheetContent>
        </Sheet>
    );
}