import React from 'react';
import { useScrollEffects } from '@/lib/hooks/useScrollEffects';
import { Logo } from './navbar/Logo';
import { NavLinks } from './navbar/NavLinks';
import { ActionButtons } from './navbar/ActionButtons';
import { MobileMenuButton } from './navbar/MobileMenuButton';
import { MobileMenu } from './MobileMenu';
import { cn, useResizeHandler } from '@/lib/utils';
import type { Translation } from '@/types/i18n';

interface ModernNavigationProps {
  translations: Translation['navigation'];
  languageSwitcher: React.ReactElement;
}

export const ModernNavigation: React.FC<ModernNavigationProps> = ({ 
  translations, 
  languageSwitcher 
}) => {
  const { scrolled } = useScrollEffects();
  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);

  // Fermer le menu mobile lors du redimensionnement - optimisé
  React.useEffect(() => {
    const cleanup = useResizeHandler(() => setMobileMenuOpen(false));
    return cleanup;
  }, []);

  return (
    <>
      {/* Navigation moderne épurée */}
      <nav className={cn(
        'fixed top-0 left-0 right-0 z-50',
        'bg-blue-700/95 backdrop-blur-md border-b border-blue-600/30',
        'transition-fast',
        scrolled && 'shadow-lg'
      )}>
        <div className="max-w-7xl mx-auto">
          <div className="flex justify-between items-center px-4 sm:px-6 lg:px-8 h-16">
            
            <Logo scrolled={scrolled} />

            <div className="flex-1 flex justify-center">
              <NavLinks translations={translations} scrolled={scrolled} />
            </div>

            <ActionButtons 
              scrolled={scrolled}
              languageSwitcher={languageSwitcher}
            />

            <MobileMenuButton
              isOpen={mobileMenuOpen}
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            />
          </div>
        </div>

        {/* Ligne de séparation moderne */}
        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-400/40 to-transparent" />
      </nav>

      {/* Spacer pour compenser la navbar fixed */}
      <div className="h-16" />

      <MobileMenu
        isOpen={mobileMenuOpen}
        onClose={() => setMobileMenuOpen(false)}
        translations={translations}
      />
    </>
  );
};