import React from 'react';

const ListCard = ({ imageUrl, title, buttonText }) => {
  const cardStyle = {
    width: '100%',
    maxWidth: '270px',
    minHeight: '304px',
    display: 'flex',
    flexDirection: 'column',
    padding: '40px 16px',
    gap: '24px',
    backgroundColor: '#ecf1fc1a',
    borderRadius: '12px',
    border: '1px solid #3e6ee3',
    boxSizing: 'border-box',
  };

  const imageContainerStyle = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  };

  const imageStyle = {
    width: '88px',
    height: '88px',
    objectFit: 'contain',
  };

  const contentStyle = {
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    gap: '16px',
    alignItems: 'center',
  };

  const titleStyle = {
    fontFamily: 'DM Sans, sans-serif',
    fontSize: '20px',
    fontWeight: 700,
    lineHeight: '24px',
    color: '#16274f',
    textAlign: 'center',
  };

  const buttonStyle = {
    padding: '12px 20px',
    borderRadius: '200px',
    border: '1px solid #c7c9ce',
    backgroundColor: 'transparent',
    color: '#4b5162',
    fontFamily: 'DM Sans, sans-serif',
    fontSize: '16px',
    fontWeight: 700,
    lineHeight: '122%',
    cursor: 'pointer',
    transition: 'all 0.2s ease-in-out',
  };

  const buttonHoverStyle = {
    backgroundColor: '#f5f5f5',
  };

  return (
    <div className='ListCard_cardStyle'>
      <div className='ListCard_imageContainerStyle'>
        <img src={imageUrl} alt={title} className='ListCard_imageStyle' />
      </div>
      <div className='ListCard_contentStyle'>
        <h3 className='ListCard_titleStyle'>{title}</h3>
        {/*<div style={{ display: 'flex', justifyContent: 'center' }}>
          <button className='ListCard_buttonStyle'
            onMouseEnter={(e) => {
              Object.assign(e.target.style, buttonHoverStyle);
            }}
            onMouseLeave={(e) => {
              Object.assign(e.target.style, buttonStyle);
            }}
          >
            {buttonText}
          </button>
        </div>*/}
      </div>
    </div>
  );
};

ListCard.defaultProps = {
  imageUrl: '/img/editeur_fr_drapeau.png',
  title: 'Editeur Français',
  buttonText: 'Découvrir'
};

export default ListCard;

