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

export function ThemeToggle() {
  const { theme, toggle } = useTheme()
  const isDark = theme === 'dark'

  return (
    <button
      type="button"
      onClick={toggle}
      className="theme-toggle"
      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
      title={isDark ? 'Light mode' : 'Dark mode'}
    >
      <span className={`theme-toggle-track ${isDark ? 'is-dark' : ''}`}>
        <span className="theme-toggle-thumb">{isDark ? '🌙' : '☀️'}</span>
      </span>
      <span className="text-xs font-mono hidden sm:inline text-[var(--text-muted)]">
        {isDark ? 'Dark' : 'Light'}
      </span>
    </button>
  )
}