import React from 'react';

const LearningGraphSection = ({ current = 700, months = ['Mar', 'Apr', 'May', 'Jun', 'Jul'], yAxis = [5000, 1000, 500, 100, 0] }) => {
  return (
    <div style={{
      width: '100%',
      maxWidth: '451px',
      height: 'auto',
      backgroundColor: '#ffffff',
      borderRadius: '8px',
      padding: '24px',
      display: 'flex',
      flexDirection: 'column',
      gap: '20px',
      boxSizing: 'border-box'
    }}>
      <h2 style={{
        fontFamily: 'DM Sans',
        fontSize: '20px',
        fontWeight: 700,
        color: '#16274f',
        margin: 0
      }}>
        Nombre d'apprenants
      </h2>

      <div style={{
        position: 'relative',
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center'
      }}>
        {/* Y-axis labels */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          paddingRight: '20px',
          fontFamily: 'Inter',
          fontSize: '14px',
          fontWeight: 500,
          color: '#4b5162',
          lineHeight: '120%'
        }}>
          {yAxis.map((value, index) => (
            <span key={index}>{value}</span>
          ))}
        </div>

        {/* Graph area */}
        <div style={{
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          position: 'relative'
        }}>
          {/* Graph lines */}
          <div style={{
            flex: 1,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            position: 'relative'
          }}>
            {[...Array(5)].map((_, index) => (
              <div
                key={index}
                style={{
                  width: '100%',
                  height: '1.5px',
                  backgroundColor: '#c7c9ce',
                  opacity: 0.2
                }}
              />
            ))}

            {/* Graph content would go here */}
            <div style={{
              position: 'absolute',
              top: '30%',
              right: '20%',
              backgroundColor: '#0aa690',
              padding: '10px 15px',
              borderRadius: '6px',
              color: 'white',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center'
            }}>
              <div style={{
                fontSize: '18px',
                marginBottom: '4px'
              }}>
                {current}
              </div>
              <div style={{
                fontSize: '12px',
                opacity: 0.8
              }}>
                apprenants
              </div>
            </div>
          </div>

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

export default LearningGraphSection;

