import { useTheme } from '../theme/ThemeContext'

function SunIcon() {
  return (
    <svg aria-hidden className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <circle cx="12" cy="12" r="4" />
      <path strokeLinecap="round" d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4" />
    </svg>
  )
}

function MoonIcon() {
  return (
    <svg aria-hidden className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75">
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M20 14.5A7.5 7.5 0 0 1 9.5 4 6.5 6.5 0 1 0 20 14.5Z"
      />
    </svg>
  )
}

export function ThemeToggle({
  className = '',
  compact = false,
  wood = false,
}: {
  className?: string
  compact?: boolean
  wood?: boolean
}) {
  const { theme, toggleTheme } = useTheme()
  const isDark = theme === 'dark'

  const base = wood
    ? 'border-white/30 bg-white/10 text-white hover:bg-white/20'
    : 'ac-btn-secondary'

  return (
    <button
      type="button"
      onClick={toggleTheme}
      className={`${base} inline-flex items-center justify-center gap-1.5 rounded-[var(--radius-pill)] ${compact ? 'px-3 py-2 text-sm' : 'px-4 py-2.5 text-sm'} ${className}`}
      aria-label={isDark ? '切換為淺色模式' : '切換為深色模式'}
    >
      {isDark ? <SunIcon /> : <MoonIcon />}
      <span className={compact ? 'hidden sm:inline' : ''}>{isDark ? '淺色' : '深色'}</span>
    </button>
  )
}