

const FrenchSolution = ({ width = 162, height = 120 }) => {
  const containerStyle = {
    width: width,
    height: height,
    backgroundColor: '#ffffff',
    borderRadius: 8,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    boxSizing: 'border-box',
    fontFamily: 'DM Sans, sans-serif',
    color: '#16274f',
  };

  const solutionsStyle = {
    fontSize: '12px',
    fontWeight: 700,
    marginBottom: '4px',
  };

  const percentageStyle = {
    fontSize: '40px',
    fontWeight: 700,
    lineHeight: '1.2',
    margin: '0',
  };

  const frenchStyle = {
    fontSize: '18px',
    fontWeight: 700,
    textTransform: 'uppercase',
    lineHeight: '120%',
    margin: '0',
  };

  return (
    <div style={containerStyle}>
      <div className="FrenchSolution_block_containerStyle">Solutions</div>
      <div className="FrenchSolution_block_percentageStyle">100%</div>
      <div className="FrenchSolution_block_frenchStyle">française <img src="/img/fr_flag.png" alt="France" style={{height:'15px', width:'24px', borderRadius:'1px' }}/> </div>
    </div>
  );
};

export default FrenchSolution;

