import React from 'react';import React from 'react';import React from 'react';import React from 'react';

import { DiscordLogo } from '@/components/ui/DiscordLogo';

import { URLS } from '@/lib/config/constants';import { Button } from '../../common/Button';



// Fonction utilitaire simple pour combiner les classesimport { URLS } from '@/lib/config/constants';import { Button } from '../../common/Button';import { Button } from '../../common/      >

const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {

  return classes.filter(Boolean).join(' ');import { DiscordLogo } from '@/components/ui/DiscordLogo';

};

import { URLS } from '@/lib/config/constants';        <DiscordLogo size="sm" className="text-white" />

interface ActionButtonsProps {

  scrolled?: boolean;// Fonction utilitaire simple pour combiner les classes

  languageSwitcher: React.ReactElement;

  className?: string;const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {import { DiscordLogo } from '@/components/ui/DiscordLogo';      </button>n';

}

  return classes.filter(Boolean).join(' ');

export const ActionButtons: React.FC<ActionButtonsProps> = ({ 

  scrolled = false, };import { URLS } from '@/lib/config/constants';

  languageSwitcher, 

  className 

}) => {

  return (interface ActionButtonsProps {// Fonction utilitaire simple pour combiner les classesimport { DiscordLogo } from '@/components/ui/DiscordLogo';

    <div className={mergeClasses(

      'hidden md:flex items-center space-x-3',  scrolled?: boolean;

      className

    )}>  languageSwitcher: React.ReactElement;const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {

      {/* Sélecteur de langue moderne */}

      <div className="relative">  className?: string;

        {languageSwitcher}

      </div>}  return classes.filter(Boolean).join(' ');// Fonction utilitaire simple pour combiner les classes



      {/* Bouton Discord moderne */}

      <button

        onClick={() => window.open(URLS.social.discord, '_blank')}export const ActionButtons: React.FC<ActionButtonsProps> = ({ };const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {

        className={mergeClasses(

          // Base styles  scrolled = false, 

          'inline-flex items-center px-4 py-2.5 text-sm font-medium',

          'bg-[#5865F2] text-white rounded-xl border border-[#5865F2]/20',  languageSwitcher,   return classes.filter(Boolean).join(' ');

          'transition-all duration-200 ease-in-out',

          'hover:bg-[#4752C4] hover:scale-[1.02] hover:shadow-lg hover:shadow-[#5865F2]/25',  className 

          'focus:outline-none focus:ring-2 focus:ring-[#5865F2]/50',

          'active:scale-[0.98]',}) => {interface ActionButtonsProps {};

          // Mobile adaptation

          'hidden lg:flex'  return (

        )}

        aria-label="Rejoindre notre Discord"    <div className={mergeClasses(  scrolled?: boolean;

      >

        <DiscordLogo size="sm" className="text-white mr-2" />      'hidden md:flex items-center space-x-3',

        Discord

      </button>      className  languageSwitcher: React.ReactElement;interface ActionButtonsProps {



      {/* Version icon seulement pour les écrans moyens */}    )}>

      <button

        onClick={() => window.open(URLS.social.discord, '_blank')}      {/* Sélecteur de langue moderne */}  className?: string;  scrolled?: boolean;

        className={mergeClasses(

          'flex lg:hidden items-center justify-center w-10 h-10',      <div className="relative">

          'bg-[#5865F2] text-white rounded-xl border border-[#5865F2]/20',

          'transition-all duration-200 ease-in-out',        {languageSwitcher}}  languageSwitcher: React.ReactElement;

          'hover:bg-[#4752C4] hover:scale-[1.02] hover:shadow-lg hover:shadow-[#5865F2]/25',

          'focus:outline-none focus:ring-2 focus:ring-[#5865F2]/50',      </div>

          'active:scale-[0.98]'

        )}        className?: string;

        aria-label="Rejoindre Discord"

      >      {/* Bouton Discord moderne */}

        <DiscordLogo size="sm" className="text-white" />

      </button>      <buttonexport const ActionButtons: React.FC<ActionButtonsProps> = ({ }

    </div>

  );        onClick={() => window.open(URLS.social.discord, '_blank')}

};
        className={mergeClasses(  scrolled = false, 

          // Base styles

          'inline-flex items-center px-4 py-2.5 text-sm font-medium',  languageSwitcher, export const ActionButtons: React.FC<ActionButtonsProps> = ({ 

          'bg-[#5865F2] text-white rounded-xl border border-[#5865F2]/20',

          'transition-all duration-200 ease-in-out',  className   scrolled = false, 

          'hover:bg-[#4752C4] hover:scale-[1.02] hover:shadow-lg hover:shadow-[#5865F2]/25',

          'focus:outline-none focus:ring-2 focus:ring-[#5865F2]/50',}) => {  languageSwitcher, 

          'active:scale-[0.98]',

            return (  className 

          // Mobile adaptation

          'hidden lg:flex'    <div className={mergeClasses(}) => {

        )}

        aria-label="Rejoindre notre Discord"      'hidden md:flex items-center space-x-3',  return (

      >

        <DiscordLogo size="sm" className="text-white mr-2" />      className    <div className={mergeClasses(

        Discord

      </button>    )}>      'hidden md:flex items-center space-x-3',



      {/* Version icon seulement pour les écrans moyens */}      {/* Sélecteur de langue moderne */}      className

      <button

        onClick={() => window.open(URLS.social.discord, '_blank')}      <div className="relative">    )}>

        className={mergeClasses(

          'flex lg:hidden items-center justify-center w-10 h-10',        {languageSwitcher}      {/* Sélecteur de langue moderne */}

          'bg-[#5865F2] text-white rounded-xl border border-[#5865F2]/20',

          'transition-all duration-200 ease-in-out',      </div>      <div className="relative">

          'hover:bg-[#4752C4] hover:scale-[1.02] hover:shadow-lg hover:shadow-[#5865F2]/25',

          'focus:outline-none focus:ring-2 focus:ring-[#5865F2]/50',              {languageSwitcher}

          'active:scale-[0.98]'

        )}      {/* Bouton Discord moderne */}      </div>

        aria-label="Rejoindre Discord"

      >      <button      

        <DiscordLogo size="sm" className="text-white" />

      </button>        onClick={() => window.open(URLS.social.discord, '_blank')}      {/* Bouton Discord moderne */}

    </div>

  );        className={mergeClasses(      <button

};
          // Base styles        onClick={() => window.open(URLS.social.discord, '_blank')}

          'inline-flex items-center px-4 py-2.5 text-sm font-medium',        className={mergeClasses(

          'bg-[#5865F2] text-white rounded-xl border border-[#5865F2]/20',          // Base styles

          'transition-all duration-200 ease-in-out',          'inline-flex items-center px-4 py-2.5 text-sm font-medium',

          'hover:bg-[#4752C4] hover:scale-[1.02] hover:shadow-lg hover:shadow-[#5865F2]/25',          'bg-[#5865F2] text-white rounded-xl border border-[#5865F2]/20',

          'focus:outline-none focus:ring-2 focus:ring-[#5865F2]/50',          'transition-all duration-200 ease-in-out',

          'active:scale-[0.98]',          'hover:bg-[#4752C4] hover:scale-[1.02] hover:shadow-lg hover:shadow-[#5865F2]/25',

                    'focus:outline-none focus:ring-2 focus:ring-[#5865F2]/50',

          // Mobile adaptation          'active:scale-[0.98]',

          'hidden lg:flex'          

        )}          // Mobile adaptation

        aria-label="Rejoindre notre Discord"          'hidden lg:flex'

      >        )}

        <DiscordLogo size="sm" className="text-white mr-2" />        aria-label="Rejoindre notre Discord"

        Discord      >

      </button>        <DiscordLogo size="sm" className="text-white mr-2" />

        Discord

      {/* Version icon seulement pour les écrans moyens */}      </button>

      <button

        onClick={() => window.open(URLS.social.discord, '_blank')}      {/* Version icon seulement pour les écrans moyens */}

        className={mergeClasses(      <button

          'flex lg:hidden items-center justify-center w-10 h-10',        onClick={() => window.open(URLS.social.discord, '_blank')}

          'bg-[#5865F2] text-white rounded-xl border border-[#5865F2]/20',        className={mergeClasses(

          'transition-all duration-200 ease-in-out',          'flex lg:hidden items-center justify-center w-10 h-10',

          'hover:bg-[#4752C4] hover:scale-[1.02] hover:shadow-lg hover:shadow-[#5865F2]/25',          'bg-[#5865F2] text-white rounded-xl border border-[#5865F2]/20',

          'focus:outline-none focus:ring-2 focus:ring-[#5865F2]/50',          'transition-all duration-200 ease-in-out',

          'active:scale-[0.98]'          'hover:bg-[#4752C4] hover:scale-[1.02] hover:shadow-lg hover:shadow-[#5865F2]/25',

        )}          'focus:outline-none focus:ring-2 focus:ring-[#5865F2]/50',

        aria-label="Rejoindre Discord"          'active:scale-[0.98]'

      >        )}

        <DiscordLogo size="sm" className="text-white" />        aria-label="Rejoindre Discord"

      </button>      >

    </div>        <svg className="w-5 h-5" 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>
    </div>
  );
};