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

export function ThemeToggle() {
  const { isDark, toggleTheme } = useTheme()

  return (
    <button
      onClick={toggleTheme}
      className="icon-btn w-9 h-9"
      title={isDark ? '切换到浅色模式' : '切换到深色模式'}
    >
      {isDark ? (
        <Sun className="w-[18px] h-[18px] text-[var(--color-amber)]" strokeWidth={2} />
      ) : (
        <Moon className="w-[18px] h-[18px] text-[var(--color-text-secondary)]" strokeWidth={2} />
      )}
    </button>
  )
}