import { useTheme } from '../theme/ThemeProvider';

/**
 * Visible theme switcher (requirements FR-3, Functional Design Q1/Q7).
 * Rendered as a small icon/swatch button in the nav.
 */
export function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  const isPurple = theme === 'purple';

  return (
    <button
      type="button"
      onClick={toggleTheme}
      aria-label="Wissel kleurthema"
      aria-pressed={isPurple}
      data-testid="theme-toggle-button"
      className="font-mono flex h-8 w-8 items-center justify-center rounded-full border border-line text-xs font-medium text-text transition-colors hover:border-accent-line"
    >
      <span
        aria-hidden="true"
        className="block h-4 w-4 rounded-full bg-accent"
        data-testid="theme-toggle-swatch"
      />
    </button>
  );
}