import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { useMitt } from '@/plugins/MittContext';
import CartIcon from '@/reusables/cart-icon';
import useLocalSettingsStore from '@/stores/localSettingsStore';
import { Menu } from 'lucide-react';

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

    const emitter = useMitt();

    const openUpgradeSheet = () => {
        emitter.emit('openUpgradeSheet');
    };

    return (
        <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm dark:bg-neutral-800', 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={() => {
                    openUpgradeSheet();
                }}
            >
                {/* <span className="text-sm font-semibold">0</span> */}
                <CartIcon className="h-8 w-8" />
            </Button>
        </div>
    );
};

export default EditorHeader;