import { ACCENTS, useAppearance } from '../lib/appearance'

export function ThemeControls() {
  const { mode, accent, setAccent, toggle } = useAppearance()

  return (
    <div className="appearance">
      <div className="swatches" role="radiogroup" aria-label="Accent colour">
        {ACCENTS.map((a) => (
          <button
            key={a.id}
            type="button"
            role="radio"
            aria-checked={accent === a.id}
            aria-label={a.label}
            title={a.label}
            className={`swatch${accent === a.id ? ' on' : ''}`}
            data-accent={a.id}
            onClick={() => setAccent(a.id)}
          />
        ))}
      </div>
      <button
        type="button"
        className="mode-toggle"
        onClick={toggle}
        title={mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
        aria-label={mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
      >
        {mode === 'dark' ? <SunIcon /> : <MoonIcon />}
      </button>
    </div>
  )
}

function SunIcon() {
  return (
    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
      <circle cx="10" cy="10" r="3.6" />
      <path d="M10 1.6v2.1M10 16.3v2.1M18.4 10h-2.1M3.7 10H1.6M15.9 4.1l-1.5 1.5M5.6 14.4l-1.5 1.5M15.9 15.9l-1.5-1.5M5.6 5.6L4.1 4.1" />
    </svg>
  )
}

function MoonIcon() {
  return (
    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17.5 12.4A7.9 7.9 0 0 1 7.6 2.5a7.9 7.9 0 1 0 9.9 9.9z" />
    </svg>
  )
}