'use client';

import { useTheme } from './ThemeProvider';
import { useEffect, useState } from 'react';

export function ThemeToggle() {
    const { theme, toggleTheme } = useTheme();
    const [mounted, setMounted] = useState(false);

    // Avoid hydration mismatch by only rendering icon after mount
    useEffect(() => {
        setMounted(true);
    }, []);

    if (!mounted) {
        return <button className="theme-toggle" style={{ visibility: 'hidden' }}>☀️</button>;
    }

    return (
        <button
            onClick={toggleTheme}
            className="theme-toggle"
            title={theme === 'light' ? '切换到深色模式' : '切换到亮色模式'}
            aria-label="Toggle theme"
        >
            {theme === 'light' ? '🌙' : '☀️'}
        </button>
    );
}