import React from 'react';
import { Sun, Moon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useRhTheme } from '../../hooks/useRhTheme';

export const RhHeader = () => {
    const { theme, toggleTheme } = useRhTheme();
    const isDark = theme === 'dark';

    return (
        <header className="h-16 px-8 sticky top-0 z-40 backdrop-blur-md border-b flex items-center justify-end bg-white/80 dark:bg-[#121212]/80 border-slate-200 dark:border-[#27272a]">
            {/* Right side - Theme Toggle only */}
            <div className="flex items-center gap-3">
                {/* Theme Toggle */}
                <button 
                   onClick={toggleTheme}
                   className={cn(
                     "p-2.5 rounded-3xl transition-all group",
                     isDark ? "text-amber-400 hover:bg-amber-400/10" : "text-slate-500 hover:bg-slate-100"
                   )}
                   title={isDark ? 'Mudar para Claro' : 'Mudar para Escuro'}
                >
                   {isDark ? (
                     <Sun size={20} className="group-hover:rotate-45 transition-transform duration-300" />
                   ) : (
                     <Moon size={20} className="group-hover:-rotate-12 transition-transform duration-300" />
                   )}
                </button>
            </div>
        </header>
    );
};
