const VisionSection = ({
  title = "NOTRE VISION",
  heading = "Nous simplifions la gestion de votre organisme de formation.",
  description = "Chez MySy Training, nous croyons en une gestion de formation simplifiée pour booster l'efficacité des établissements éducatifs. Notre mission est de fournir des solutions technologiques innovantes pour faciliter la vie des formateurs et enrichir l'expérience des apprenants. Nous nous engageons à rendre la formation accessible, efficace et durable.",
  buttonText = "Découvrez notre solution",
  imageSrc = "/img/img_a_propos_main.jpg"
}) => {
  return (
    <div className="VisionSection_block1">
      {/* Image Section */}
      <div className="VisionSection_section_img" />

      {/* Content Section */}
      <div className='VisionSection_content_section' >
        {/* Title and Heading */}
        <div className='VisionSection_title'>
          <span className="VisionSection_title_span" >
            {title}
          </span>
          <h2 className="VisionSection_title_h2" >
            {heading}
          </h2>
        </div>

        {/* Description */}
        <p className="VisionSection_description" >
          {description}
        </p>

        {/* Button */}
        <button
          className="VisionSection_buton"
          onMouseOver={(e) => {
            e.target.style.background = '#f5f5f5';
          }}
          onMouseOut={(e) => {
            e.target.style.background = 'transparent';
          }}
        >
          {buttonText}
        </button>
      </div>
    </div>
  );
};

export default VisionSection;

