import React from 'react';
import { mergeClasses as cn } from '../../../styles/designSystem';

interface MobileMenuButtonProps {
  isOpen: boolean;
  onClick: () => void;
  className?: string;
}

export const MobileMenuButton: React.FC<MobileMenuButtonProps> = ({ 
  isOpen, 
  onClick, 
  className 
}) => {
  return (
    <button
      className={cn(
        'md:hidden relative p-3 rounded-xl transition-all duration-300 group',
        'bg-white/10 hover:bg-white/20 active:bg-white/25',
        'border border-white/20 hover:border-white/30',
        'hover:scale-105 active:scale-95',
        'focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50',
        className
      )}
      onClick={onClick}
      aria-label={isOpen ? "Fermer le menu" : "Ouvrir le menu"}
      aria-expanded={isOpen}
    >
      {/* Hamburger Icon avec animation moderne */}
      <div className="w-6 h-6 relative flex flex-col justify-center items-center">
        <span className={cn(
          'absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out transform',
          isOpen ? 'rotate-45 translate-y-0' : '-translate-y-2'
        )} />
        <span className={cn(
          'absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out',
          isOpen ? 'opacity-0 scale-0' : 'opacity-100 scale-100'
        )} />
        <span className={cn(
          'absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out transform',
          isOpen ? '-rotate-45 translate-y-0' : 'translate-y-2'
        )} />
      </div>
      
      {/* Subtle glow effect on hover */}
      <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
    </button>
  );
};