'use client';

import { useTheme } from '@/contexts/ThemeContext';

export default function ThemeToggle() {
    const { toggleTheme } = useTheme();

    return (
        <button
            onClick={toggleTheme}
            className="p-2 rounded-lg bg-gradient-to-r from-primary/10 to-secondary/10 hover:from-primary/20 hover:to-secondary/20 transition-all duration-300 border border-primary/20 hover:border-primary/40"
            aria-label="Alternar tema"
        >
            {typeof window !== 'undefined' && document.documentElement.classList.contains('dark') ? (
                <i className="ri-sun-line text-lg gradient-text font-bold" />
            ) : (
                <i className="ri-moon-line text-lg gradient-text font-bold" />
            )}
        </button>
    );
}