import { useState } from 'react'
import { ACCENTS, getAccent, getThemeMode, setAccent, setThemeMode, type Accent } from './theme'

const SWATCH: Record<Accent, string> = {
  indigo: '#4f5df0',
  blue: '#2f7ce8',
  emerald: '#14957a',
  violet: '#8250df',
  rose: '#d4497c',
  amber: '#b97e10',
}

/** Compact mode toggle + accent picker; drops into any header. */
export function ThemeSwitcher() {
  const [mode, setMode] = useState(getThemeMode())
  const [accent, setAccentState] = useState(getAccent())

  return (
    <div className="wf-themer" title="Theme">
      {ACCENTS.map((a) => (
        <button
          key={a}
          type="button"
          className={`swatch${a === accent ? ' active' : ''}`}
          style={{ background: SWATCH[a] }}
          aria-label={`Accent ${a}`}
          onClick={() => {
            setAccent(a)
            setAccentState(a)
          }}
        />
      ))}
      <button
        type="button"
        className="mode"
        onClick={() => {
          const next = mode === 'light' ? 'dark' : 'light'
          setThemeMode(next)
          setMode(next)
        }}
      >
        {mode === 'light' ? '☾ Dark' : '☀ Light'}
      </button>
    </div>
  )
}