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

const SolutionDescription = ({
  title = "Une expertise dédiée à votre réussite",
  subtitle = "À PROPOS DE NOUS",
  description_1 = "Chez MySy Training, nous sommes passionnés par l'éducation et la technologie. Notre mission est de fournir des solutions innovantes pour faciliter la gestion des formations et améliorer l'expérience d'apprentissage.",
  description_2 = "Avec une équipe d'experts dévoués, nous accompagnons les établissements éducatifs dans leur transformation digitale.",
  buttonText = "En savoir plus"
}) => {
  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_1}
          </p>
          <p className='SolutionDescription_block3_p'>
            {description_2}
          </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'  onClick={() => {
            window.open(
              "/fonctionnalites/",
              '_self'
          );
          }}>
            {buttonText}
          </span>
        </button>
      </div>
    </div>
  );
};

export default SolutionDescription;

