'use client';

import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';

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

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

    if (!mounted) {
        return <div className="w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-800" />;
    }

    const isDark = resolvedTheme === 'dark';

    return (
        <button
            type="button"
            onClick={() => setTheme(isDark ? 'light' : 'dark')}
            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
            aria-label={isDark ? 'Ativar tema claro' : 'Ativar tema escuro'}
            title={isDark ? 'Alterar para modo claro' : 'Alterar para modo escuro'}
        >
            {isDark ? (
                <SunIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
            ) : (
                <MoonIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
            )}
        </button>
    );
}