import React from 'react';

const LearningChartSection = ({ width = '100%', height = 'auto' }) => {
  const chartData = {
    months: ['Mar', 'Apr', 'May', 'Jun', 'Jul'],
    values: [
      { x: 0, y: 300 },
      { x: 1, y: 700 },
      { x: 2, y: 500 },
      { x: 3, y: 1000 },
      { x: 4, y: 800 }
    ]
  };

  return (
    <div style={{
      width: width,
      maxWidth: '451px',
      height: height,
      padding: '24px',
      backgroundColor: '#ffffff',
      borderRadius: '8px',
      display: 'flex',
      flexDirection: 'column',
      gap: '20px',
      boxSizing: 'border-box'
    }}>
      <h2 style={{
        margin: 0,
        fontFamily: 'DM Sans',
        fontSize: '20px',
        fontWeight: 700,
        color: '#16274f'
      }}>
        Nombre d'apprenants
      </h2>

      <div style={{
        position: 'relative',
        flex: 1,
        display: 'flex'
      }}>
        {/* Y-axis labels */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          paddingRight: '20px',
          fontFamily: 'Inter',
          fontSize: '14px',
          fontWeight: 500,
          color: '#4b5162'
        }}>
          <span>5000</span>
          <span>1000</span>
          <span>500</span>
          <span>100</span>
          <span>0</span>
        </div>

        {/* Chart area */}
        <div style={{
          flex: 1,
          display: 'flex',
          flexDirection: 'column'
        }}>
          {/* Grid lines */}
          <div style={{
            flex: 1,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            borderLeft: '1.5px solid rgba(199, 201, 206, 0.2)'
          }}>
            {[...Array(5)].map((_, i) => (
              <div key={i} style={{
                width: '100%',
                height: '1.5px',
                backgroundColor: 'rgba(199, 201, 206, 0.2)'
              }} />
            ))}
          </div>

          {/* Tooltip */}
          <div style={{
            position: 'absolute',
            top: '40%',
            left: '60%',
            backgroundColor: '#0aa690',
            padding: '10px 15px',
            borderRadius: '6px',
            color: '#ffffff'
          }}>
            <div style={{
              fontSize: '18px',
              marginBottom: '4px'
            }}>700</div>
            <div style={{
              fontSize: '12px',
              opacity: 0.8
            }}>apprenants</div>
            <div style={{
              position: 'absolute',
              bottom: '-10px',
              left: '50%',
              transform: 'translateX(-50%)',
              width: 0,
              height: 0,
              borderLeft: '10px solid transparent',
              borderRight: '10px solid transparent',
              borderTop: '10px solid #0aa690'
            }} />
          </div>

          {/* X-axis labels */}
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            marginTop: '10px',
            fontFamily: 'Chivo',
            fontSize: '15px',
            color: '#4b5162'
          }}>
            {chartData.months.map((month, i) => (
              <span key={i}>{month}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default LearningChartSection;

