import { useTheme } from '@/hooks/use-theme';
import type { ThemePreference } from '@/hooks/use-theme';
import { cn } from '@/lib/utils';

const themeOptions: { label: string; value: ThemePreference }[] = [
    { label: 'Auto', value: 'auto' },
    { label: 'Light', value: 'light' },
    { label: 'Dark', value: 'dark' },
];

export function ThemeToggle() {
    const { theme, resolvedTheme, setTheme } = useTheme();

    return (
        <div
            className="inline-grid w-full grid-cols-3 rounded-xl border border-border bg-surface p-1 shadow-sm sm:w-auto"
            aria-label={`Theme mode: ${theme}`}
        >
            {themeOptions.map((option) => {
                const isActive = theme === option.value;

                return (
                    <button
                        key={option.value}
                        type="button"
                        onClick={() => setTheme(option.value)}
                        aria-pressed={isActive}
                        className={cn(
                            'rounded-lg px-3 py-2 text-xs font-semibold text-muted transition sm:px-3.5',
                            'focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none',
                            isActive
                                ? 'bg-primary text-white shadow-sm'
                                : 'hover:bg-card hover:text-main',
                        )}
                    >
                        <span>{option.label}</span>
                        {option.value === 'auto' && isActive ? (
                            <span className="ml-1 text-[10px] font-medium text-white/80 uppercase">
                                {resolvedTheme}
                            </span>
                        ) : null}
                    </button>
                );
            })}
        </div>
    );
}