import React from 'react';
import "./aboutussection.css";

const SolutionDescription = ({
  title = "ELYOS, votre outil tout-en-un pour la gestion de votre Organisme de formation",
  subtitle = "Notre solution",
  description = "Découvrez nos solutions logicielles adaptées à la gestion administrative, à la communication et au suivi des performances de votre établissement de formation.",
  buttonText = "Découvrir ELYOS"
}) => {
  return (
    <div className='aboutussection' >
    
      <div className='SolutionDescription_block1'>
        <div className='SolutionDescription_block2'>
          <div className='SolutionDescription_block3'>
            <span className='SolutionDescription_block3_span'>
              {subtitle}
            </span>
            <h1 className='SolutionDescription_block3_h1'>
              {title}
            </h1>
          </div>
          <p className='SolutionDescription_block3_p'>
            {description}
          </p>
        </div>
        <button
          className='SolutionDescription_block3_bton_solution'
          onMouseOver={(e) => {
            e.currentTarget.style.background = '#F5F5F5';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.background = 'transparent';
          }}


        >
          <span className='SolutionDescription_block3_bton_text'>
            {buttonText}
          </span>
        </button>
      </div>
    </div>
  );
};

export default SolutionDescription;

