import React from 'react';

const CommentMarche_ListCard = ({ imageUrl, title, buttonText, description, type }) => {


  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>
      {type === "1" && <div className='CommentMarche_ListCard_cardStyle'>
        <div className='CommentMarche_ListCard_imageContainerStyle'>
          <img src={imageUrl} alt={title} className='CommentMarche_ListCard_imageStyle' />
        </div>
        <div className='CommentMarche_ListCard_contentStyle'>
          <h3 className='CommentMarche_ListCard_titleStyle'>{title}</h3>
          <div style={{ display: 'flex', justifyContent: 'center' }} className='CommentMarche_ListCard_description'>
            {description}
          </div>
        </div>
      </div>}

      {type === "0" && <div className='CommentMarche_ListCard_cardStyle' style={{maxWidth:'200px', alignItems:'center', justifyContent:'center', marginLeft:'auto', marginRight:'auto'}}>
        <div className='CommentMarche_ListCard_imageContainerStyle'>
          <img src={imageUrl} alt={title} className='CommentMarche_ListCard_imageStyle' />
        </div>
        <div className='CommentMarche_ListCard_contentStyle'>
          <h3 className='CommentMarche_ListCard_titleStyle'>{title}</h3>
          <div style={{ display: 'flex', justifyContent: 'center' }} className='CommentMarche_ListCard_description'>
            {description}
          </div>
        </div>
      </div>}
    </div>
  );
};

CommentMarche_ListCard.defaultProps = {
  imageUrl: 'https://dashboard.codeparrot.ai/api/image/Z6xpvmNxokPE5KTq/france-1.png',
  title: 'Editeur Français',
  description: 'Découvrir',
  buttonText: 'Découvrir',
  type: "1"

};

export default CommentMarche_ListCard;

