import { Moon, Sun } from 'lucide-react'
import { useTheme } from '@/hooks/useTheme'

/**
 * Переключатель темы оболочки «солнце/луна» (см. design/mockups/dark/*.html,
 * `.theme-toggle`). Комнату конференции не затрагивает — она всегда на своей
 * теме `[data-theme="room"]` (см. RoomPage.tsx), не участвующей в переключении.
 */
export function ThemeToggle({ className = '' }: { className?: string }) {
  const { resolved, setTheme } = useTheme()

  return (
    <div className={`theme-toggle${className ? ` ${className}` : ''}`} role="group" aria-label="Переключить тему оформления">
      <button
        type="button"
        className={`theme-toggle-btn${resolved === 'light' ? ' is-active' : ''}`}
        aria-pressed={resolved === 'light'}
        aria-label="Светлая тема"
        onClick={() => setTheme('light')}
      >
        <Sun className="icon" aria-hidden="true" />
      </button>
      <button
        type="button"
        className={`theme-toggle-btn${resolved === 'dark' ? ' is-active' : ''}`}
        aria-pressed={resolved === 'dark'}
        aria-label="Тёмная тема"
        onClick={() => setTheme('dark')}
      >
        <Moon className="icon" aria-hidden="true" />
      </button>
    </div>
  )
}
