import React from 'react';
import Image from 'next/image';
import { SITE_CONFIG } from '@/lib/config/constants';

// Fonction utilitaire simple pour combiner les classes
const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {
  return classes.filter(Boolean).join(' ');
};

interface LogoProps {
  scrolled?: boolean;
  className?: string;
}

export const Logo: React.FC<LogoProps> = ({ scrolled = false, className }) => {
  return (
    <div className={mergeClasses(
      'flex items-center group cursor-pointer transition-all duration-200',
      className
    )}>
      {/* Logo moderne avec effet subtil */}
      <div className="relative flex items-center">
        {/* Effet de glow moderne et subtil */}
        <div className="absolute inset-0 bg-blue-400/20 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-125"></div>
        
        {/* Container du logo */}
        <div className={mergeClasses(
          'relative flex items-center justify-center rounded-2xl transition-all duration-200',
          'bg-white/10 backdrop-blur-sm border border-white/20',
          'group-hover:bg-white/15 group-hover:scale-[1.02] group-hover:border-white/30',
          scrolled ? 'p-2' : 'p-2.5'
        )}>
          <Image
            src="/assets/banquise_server.svg"
            alt={SITE_CONFIG.name}
            width={scrolled ? 28 : 32}
            height={scrolled ? 28 : 32}
            className="transition-all duration-200 group-hover:scale-105"
            style={{ 
              filter: 'drop-shadow(0 2px 8px rgba(59, 130, 246, 0.3))' 
            }}
          />
        </div>
      </div>
      
      {/* Texte de marque épuré */}
      <div className="ml-3 hidden sm:block">
        <h1 className={mergeClasses(
          'font-semibold text-white tracking-tight transition-all duration-200',
          scrolled ? 'text-base' : 'text-lg lg:text-xl',
          'group-hover:text-blue-100'
        )}>
          {SITE_CONFIG.name}
        </h1>
        
        {!scrolled && (
          <p className="text-xs text-white/70 font-medium transition-all duration-200 group-hover:text-white/90">
            {SITE_CONFIG.tagline}
          </p>
        )}
      </div>
    </div>
  );
};