'use client';

import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';

export default function ThemeToggle() {
    const { resolvedTheme, setTheme } = useTheme();
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    if (!mounted) {
        return (
            <div className="h-11 w-11 rounded-full border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800" />
        );
    }

    const isDark = resolvedTheme === 'dark';

    return (
        <button
            type="button"
            onClick={() => {
                const newTheme = isDark ? 'light' : 'dark';
                console.log('[ThemeToggle] Current theme:', resolvedTheme);
                console.log('[ThemeToggle] Changing to:', newTheme);
                setTheme(newTheme);
                setTimeout(() => {
                    console.log('[ThemeToggle] HTML class:', document.documentElement.className);
                    console.log('[ThemeToggle] LocalStorage:', localStorage.getItem('theme'));
                }, 100);
            }}
            className="flex h-11 w-11 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-700 shadow-sm transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
            aria-label={isDark ? 'Ativar tema claro' : 'Ativar tema escuro'}
            title={isDark ? 'Alterar para modo claro' : 'Alterar para modo escuro'}
        >
            <i className={`text-xl ${isDark ? 'ri-moon-line' : 'ri-sun-line'}`} />
        </button>
    );
}