import React from 'react';
import { Button } from '../../common/Button';
import { mergeClasses as cn } from '@/lib/styles/designSystem';
import { URLS } from '@/lib/config/constants';

interface ActionButtonsProps {
  scrolled: boolean;
  languageSwitcher: React.ReactElement;
  className?: string;
}

export const ActionButtons: React.FC<ActionButtonsProps> = ({ 
  scrolled, 
  languageSwitcher, 
  className 
}) => {
  return (
    <div className={cn('hidden md:flex items-center space-x-3', className)}>
      {/* Language Switcher */}
      <div className="relative">
        {languageSwitcher}
      </div>
      
      {/* Discord Button */}
      <Button
        variant="discord"
        size="sm"
        leftIcon={
          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
          </svg>
        }
        onClick={() => window.open(URLS.social.discord, '_blank')}
        className="hidden lg:flex"
      >
        Discord
      </Button>

      {/* Discord Icon Only (tablet) */}
      <Button
        variant="discord"
        size="sm"
        onClick={() => window.open(URLS.social.discord, '_blank')}
        className="lg:hidden"
        aria-label="Rejoindre Discord"
      >
        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
          <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
        </svg>
      </Button>
      
      {/* Auth Button */}
      <Button
        variant="primary"
        size="sm"
        leftIcon={
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
          </svg>
        }
        onClick={() => window.open(URLS.services.auth, '_blank')}
        className={cn(
          'transition-all duration-300',
          scrolled 
            ? 'shadow-md hover:shadow-lg' 
            : 'shadow-lg hover:shadow-xl'
        )}
      >
        <span className="hidden lg:inline">Connexion</span>
        <span className="lg:hidden">Se connecter</span>
      </Button>
    </div>
  );
};
