import { Theme, useTheme } from '@/hooks/useTheme';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import { Check, Monitor, Moon, Sun } from 'lucide-react';

const OPTIONS: { value: Theme; label: string; icon: typeof Sun }[] = [
    { value: 'system', label: 'System', icon: Monitor },
    { value: 'light', label: 'Light', icon: Sun },
    { value: 'dark', label: 'Dark', icon: Moon },
];

export default function ThemeToggle() {
    const { theme, resolved, setTheme } = useTheme();
    const Icon = resolved === 'dark' ? Moon : Sun;
    return (
        <Menu>
            <MenuButton aria-label={`Theme: ${theme}`} className="inline-flex size-9 items-center justify-center rounded-lg text-muted-foreground outline-none transition hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60">
                <Icon className="size-4" />
            </MenuButton>
            <MenuItems anchor="bottom end" className="glass z-[60] w-40 rounded-xl border border-border p-1 shadow-lift outline-none [--anchor-gap:6px]">
                {OPTIONS.map(({ value, label, icon: I }) => (
                    <MenuItem key={value}>
                        <button onClick={() => setTheme(value)} className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-sm data-[focus]:bg-accent">
                            <I className="size-4 text-muted-foreground" />{label}
                            {theme === value && <Check className="ml-auto size-3.5 text-primary" />}
                        </button>
                    </MenuItem>
                ))}
            </MenuItems>
        </Menu>
    );
}