import React from 'react';

const FeatureCard = ({ iconUrl, title, description, buttonText, module }) => {
  return (
    <div  className='featurecard_top_block1'>
      <div  className='featurecard_top_block2'>
        <img
          src={iconUrl}
          alt={title}
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'contain'
          }}
        />
      </div>

      <div className='featurecard_top_block3'>
        <h3 className='featurecard_top_block_h3'>
          {title}
        </h3>
        <p  className='featurecard_top_block_p'>
          {description}
        </p>
      </div>

      <button className='featurecard_top_block_bton'
        onMouseOver={(e) => {
          e.target.style.backgroundColor = '#f5f5f5';
        }}
        onMouseOut={(e) => {
          e.target.style.backgroundColor = 'transparent';
        }}

        onClick={(e) => {

          if (String(module) === "gestion_admin") {
            window.open(
              "/fonctionnalites#badge_gestion_admin",
              '_self'
            );
          }
          else  if (String(module) === "crm") {
            window.open(
              "/fonctionnalites#badge_crm",
              '_self'
            );
          }
          else  if (String(module) === "lms") {
            window.open(
              "/fonctionnalites#badge_lms",
              '_self'
            );
          }


        }}
      >
        {buttonText}
      </button>
    </div>
  );
};

FeatureCard.defaultProps = {
  iconUrl: 'https://dashboard.codeparrot.ai/api/image/Z6Nq6qvsm-LWpee_/icons.png',
  title: 'Feature Title',
  description: 'Feature description goes here',
  buttonText: 'Découvrir',
  module: "non"
};

export default FeatureCard;

