'use client'

import { useState, useEffect } from 'react'
import { SunIcon, MoonIcon } from '@heroicons/react/24/outline'

export default function ThemeToggle() {
  const [isDark, setIsDark] = useState(true) // Default to dark mode

  useEffect(() => {
    // Check for saved theme preference or default to dark
    const savedTheme = localStorage.getItem('chorus-theme')
    const prefersDark = !savedTheme || savedTheme === 'dark'
    
    setIsDark(prefersDark)
    updateTheme(prefersDark)
  }, [])

  const updateTheme = (dark: boolean) => {
    const html = document.documentElement
    if (dark) {
      html.classList.add('dark')
    } else {
      html.classList.remove('dark')
    }
  }

  const toggleTheme = () => {
    const newIsDark = !isDark
    setIsDark(newIsDark)
    updateTheme(newIsDark)
    
    // Save preference
    localStorage.setItem('chorus-theme', newIsDark ? 'dark' : 'light')
  }

  return (
    <button
      onClick={toggleTheme}
      className="btn-text flex items-center space-x-2 p-2 rounded-md transition-colors duration-200"
      aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`}
    >
      {isDark ? (
        <>
          <SunIcon className="h-4 w-4" />
          <span className="text-xs">Light</span>
        </>
      ) : (
        <>
          <MoonIcon className="h-4 w-4" />
          <span className="text-xs">Dark</span>
        </>
      )}
    </button>
  )
}