import Icon from '@/components/site/icon';
import { common } from '@/content/common';
import { useAppearance } from '@/hooks/use-appearance';
import { useContent } from '@/hooks/use-locale';
import { cn } from '@/lib/utils';

/** Switches the whole app between light and dark mode. */
export default function ThemeToggle({ className }: { className?: string }) {
    const t = useContent(common);
    const { resolvedAppearance, updateAppearance } = useAppearance();
    const isDark = resolvedAppearance === 'dark';
    const label = isDark ? t.header.toLight : t.header.toDark;

    return (
        <button
            type="button"
            onClick={() => updateAppearance(isDark ? 'light' : 'dark')}
            aria-label={label}
            title={label}
            className={cn(
                'border-outline-variant/50 bg-surface-container-low text-on-surface hover:border-primary/60 hover:text-primary inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl border transition-colors',
                className,
            )}
        >
            <Icon
                name={isDark ? 'light_mode' : 'dark_mode'}
                className="text-xl"
            />
        </button>
    );
}