import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { cn } from '@/lib/utils';
import CoinIcon from '@/reusables/coin-icon';
import useLocalSettingsStore from '@/stores/localSettingsStore';
import { Menu } from 'lucide-react';
import { useState } from 'react';

const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = false }) => {
    const { getSetting } = useLocalSettingsStore();

    const [openCoinDialog, setOpenCoinDialog] = useState(false);

    return (
        <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm dark:bg-neutral-700', className)}>
            <Button onClick={onNavClick} variant="outline" size="icon" className="rounded">
                <Menu className="h-8 w-8" />
            </Button>

            <h1 className="font-display ml-0 text-lg tracking-wide md:ml-3 md:text-xl">MEMEAIGEN</h1>

            <Button variant="outline" className="inline-flex gap-1 rounded" onClick={() => setOpenCoinDialog(true)}>
                <span className="text-sm font-semibold">0</span>
                <CoinIcon className="h-8 w-8" />
            </Button>

            <Dialog open={openCoinDialog} onOpenChange={(open) => setOpenCoinDialog(open)}>
                <DialogContent className="sm:max-w-[425px]">
                    <DialogHeader>
                        <DialogTitle>{getSetting('genAlphaSlang') ? 'Bruh' : 'Chill'}</DialogTitle>
                        <DialogDescription>
                            {getSetting('genAlphaSlang')
                                ? "No cap, soon you'll be able to get AI cooking memes that absolutely slay! But lowkey fam, we gotta focus on making these core features bussin' first."
                                : "Soon you'll be able to prompt AI to generate memes! Let us focus on nailing the core features first."}
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
                        <div className="flex justify-between gap-1">
                            <span class="text-muted-foreground text-xs italic">
                                Note: You can turn {getSetting('genAlphaSlang') ? 'off' : 'on'} gen alpha slang in Settings.
                            </span>
                            <Button variant="outline" onClick={() => setOpenCoinDialog(false)}>
                                {getSetting('genAlphaSlang') ? 'Bet' : 'Okay'}
                            </Button>
                        </div>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    );
};

export default EditorHeader;