import { useTheme } from '../lib/theme';
import { useI18n, type TranslationKey } from '../lib/i18n';

const icons = {
  light: (
    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
    </svg>
  ),
  dark: (
    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
    </svg>
  ),
  system: (
    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8m-4-4v4" />
    </svg>
  ),
};

const order: Array<'light' | 'dark' | 'system'> = ['light', 'dark', 'system'];

export default function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const { t } = useI18n();

  return (
    <div className="flex items-center gap-1 p-1 rounded-lg bg-bg-tertiary">
      {order.map((key) => (
        <button
          key={key}
          onClick={() => setTheme(key)}
          title={t(`theme.${key}` as TranslationKey)}
          className={`flex items-center justify-center w-8 h-7 rounded-md transition-all duration-150 ${
            theme === key
              ? 'bg-bg-elevated text-text-primary shadow-sm'
              : 'text-text-muted hover:text-text-secondary'
          }`}
        >
          {icons[key]}
        </button>
      ))}
    </div>
  );
}