import React, { useContext } from 'react';
import { sections } from '../constants';
import { ThemeContext } from '../App';

interface HeaderProps {
    activeSection: string;
    onSectionChange: (sectionId: string) => void;
}

const Header: React.FC<HeaderProps> = ({ activeSection, onSectionChange }) => {
    const { theme } = useContext(ThemeContext);

    const buttonBaseClasses = "relative overflow-hidden transition-all duration-300 ease-in-out py-3 px-6 text-sm font-semibold tracking-wider uppercase rounded-full backdrop-blur-lg focus:outline-none";
    const darkClasses = "bg-white/5 border border-white/20 text-[#00ffff] hover:bg-white/10 hover:shadow-[0_0_30px_#00ffff] hover:-translate-y-0.5 hover:border-[#00ffff]";
    const lightClasses = "bg-black/5 border border-black/20 text-[#0066cc] hover:bg-black/10 hover:shadow-[0_0_30px_#0066cc] hover:-translate-y-0.5 hover:border-[#0066cc]";
    
    return (
        <header className="fixed top-0 w-full p-5 z-50">
            <nav className="w-full bg-gray-500/10 backdrop-blur-xl border border-white/10 dark:border-white/20 rounded-full">
                <ul className="flex justify-center items-center p-2 flex-wrap gap-2 md:gap-4">
                    {sections.map(section => (
                        <li key={section.id}>
                            <button
                                onClick={() => onSectionChange(section.id)}
                                className={`${buttonBaseClasses} ${theme === 'dark' ? darkClasses : lightClasses} ${activeSection === section.id ? (theme === 'dark' ? 'bg-white/20 border-[#00ffff]' : 'bg-black/20 border-[#0066cc]') : ''}`}
                            >
                                {section.title.startsWith('🚀') ? 'Home' : section.id.replace(/-/g, ' ')}
                                <span className="absolute top-0 left-[-100%] w-full h-full bg-gradient-to-r from-transparent via-white/30 to-transparent transition-all duration-700 ease-in-out group-hover:left-full"></span>
                            </button>
                        </li>
                    ))}
                </ul>
            </nav>
        </header>
    );
};

export default Header;