// Créons le composant qui est 1 bouton personnalisé appellé "BoutonAction.jsx"

// fichier src/components/BoutonAction.jsx

import React from 'react';

function BoutonAction({ texte, onClick }) 
    // texte et onClick st des props(propriétés) qui permettent de rendre le composant
    // dynamique et configurable
{
  return (
    <button 
      onClick={onClick} 
      style={{ padding: '10px 20px', backgroundColor: '#007bff', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
    >
      {texte}
    </button>
  );
}

export default BoutonAction;  // permet de rendre le composant accessible aux autres
// fichiers de notre projet 


// Appelons et réutilisons le composant ailleurs

// pr exple dans src/App.jsx 

import React from 'react';
import BoutonAction from './components/BoutonAction'; // Import du composant

function App() {
    const gererClic1 = () => {
        alert('Bouton Valider cliqué !');
    };

    const gererClic2 = () => {
        alert('Bouton Annuler cliqué !');
    };

    return (
        <div style={{ padding: '20px' }}>
            <h1>Mon App React </h1>
            <p>Voici comment réutiliser le mm composant avec des données différentes :</p>

            {/*Réutiliser le composant plusieurs fois avec des props différentes*/}
            <BoutonAction texte="Valider" onClick={gererClic1} />
                
            <div style={{ marginTop: '10px' }}>
                <BoutonAction texte="Annuler" onClick={gererClic2} />
            </div>
        </div>;
    );
}

export default App;