import React from 'react';

const StatisticsSection = ({ data = {
  title: "Statistiques",
  pieChartData: [
    { value: 75, color: '#2F54EB' },
    { value: 25, color: '#E6F7FF' }
  ],
  listItems: [
    { text: "Item 1", width: "80%" },
    { text: "Item 2", width: "60%" },
    { text: "Item 3", width: "40%" },
    { text: "Item 4", width: "20%" }
  ]
}}) => {
  return (
    <div style={{
      width: '100%',
      maxWidth: '313px',
      minHeight: '352px',
      backgroundColor: '#ffffff',
      borderRadius: '8px',
      padding: '24px',
      display: 'flex',
      flexDirection: 'column',
      gap: '24px',
      boxSizing: 'border-box'
    }}>
      <h2 style={{
        margin: 0,
        fontFamily: 'DM Sans',
        fontSize: '20px',
        fontWeight: 700,
        color: '#16274F'
      }}>
        {data.title}
      </h2>

      <div style={{
        width: '136.83px',
        height: '137.25px',
        position: 'relative',
        alignSelf: 'center'
      }}>
        <img src="https://dashboard.codeparrot.ai/api/image/Z6Nr6jRi7Jes3897/group-83.png" alt="Pie Chart" style={{ width: '100%', height: '100%' }} />
      </div>

      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '12px',
        width: '100%'
      }}>
        {data.listItems.map((item, index) => (
          <div key={index} style={{
            width: '100%',
            height: '10px',
            backgroundColor: '#F0F0F0',
            borderRadius: '5px',
            overflow: 'hidden'
          }}>
            <div style={{
              width: item.width,
              height: '100%',
              backgroundColor: '#2F54EB',
              borderRadius: '5px',
              transition: 'width 0.3s ease'
            }} />
          </div>
        ))}
      </div>
    </div>
  );
};

export default StatisticsSection;

