import React from 'react';

const Badge_Fonctionnalite = (props) => {


  return (
    <div className='new_fonctionalites_2025' style={{
      display: 'flex',
      flexDirection: 'row',
      padding: '20px',
      background: '#f8fafd',
      gap: '8px',
      alignItems: 'flex-start'
    }}>
      <div style={{
        width: '56px',
        height: '56px',
      }}>
        <img

          src={props.badge.img}
          alt={props.badge.title}
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'contain'
          }}
        />
      </div>

      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '4px',
        flex: 1
      }}>
        <h3 style={{
          margin: 0,
          fontFamily: 'Inter, sans-serif',
          fontSize: '14px',
          fontWeight: 700,
          lineHeight: '140%',
          color: '#16274f',
          textTransform: 'uppercase',
          textAlign: 'left'
        }}>
          {props.badge.title}
        </h3>

        <p style={{
          margin: 0,
          fontFamily: 'Inter, sans-serif',
          fontSize: '12px',
          fontWeight: 400,
          lineHeight: '160%',
          color: '#4b5162',
          opacity: 0.8,
          textAlign: 'left'
        }}>

          {props.badge.detail_1 && <ul>
            {props.badge.detail_1 && <li> {props.badge.detail_1} </li>}
            {props.badge.detail_2 && <li>   {props.badge.detail_2}</li>}
            {props.badge.detail_3 && <li>  {props.badge.detail_3}</li>}
          </ul>}
        </p>
      </div>
    </div>
  );
};

// Default props
Badge_Fonctionnalite.defaultProps = {
  // Add default props if needed
};

export default Badge_Fonctionnalite;

