import React from 'react';
import { mergeClasses as cn } from '../../../styles/designSystem';
import banquiseServer from '/src/assets/banquise_server.svg';
import { SITE_CONFIG } from '../../../config/constants';

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

export const Logo: React.FC<LogoProps> = ({ scrolled, className }) => {
  return (
    <div className={cn('flex items-center group cursor-pointer', className)}>
      {/* Logo avec effet glow */}
      <div className="relative flex items-center">
        <div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/30 to-banquise-blue/30 rounded-full blur-md opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110"></div>
        <div className={cn(
          'relative flex items-center justify-center rounded-full p-2 bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300',
          'group-hover:bg-white/20 group-hover:scale-105 group-hover:border-white/30'
        )}>
          <img
            src={banquiseServer}
            alt="Logo La Banquise"
            className={cn(
              'transition-all duration-300 group-hover:scale-110',
              scrolled ? 'h-8 w-8' : 'h-10 w-10'
            )}
            style={{ filter: 'drop-shadow(0 4px 12px rgba(168, 218, 255, 0.4))' }}
          />
        </div>
      </div>
      
      {/* Brand text avec animation */}
      <div className="ml-3 hidden sm:block">
        <h1 className={cn(
          'font-heading font-bold text-white tracking-tight transition-all duration-300',
          scrolled ? 'text-lg' : 'text-xl lg:text-2xl',
          'group-hover:text-banquise-blue-lightest'
        )}>
          {SITE_CONFIG.name}
        </h1>
        <p className={cn(
          'text-banquise-blue-lightest/70 font-medium transition-all duration-300',
          scrolled ? 'text-xs' : 'text-sm',
          'group-hover:text-banquise-blue-lightest/90'
        )}>
          {SITE_CONFIG.tagline}
        </p>
      </div>
    </div>
  );
};