import React from 'react';

const LearnersChartSection = () => {
  const chartData = {
    months: ['Mar', 'Apr', 'May', 'Jun', 'Jul'],
    values: [
      {x: 0, y: 200},
      {x: 1, y: 500}, 
      {x: 2, y: 700},
      {x: 3, y: 400},
      {x: 4, y: 1000}
    ]
  };

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

      <div style={{
        position: 'relative',
        height: '100%',
        display: 'flex',
        gap: '12px'
      }}>
        {/* Y-axis labels */}
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          paddingBottom: '24px'
        }}>
          {['5000', '1000', '500', '100', '0'].map((value, i) => (
            <span key={i} style={{
              fontFamily: 'Inter',
              fontSize: '14px',
              fontWeight: 500,
              color: '#4b5162',
              lineHeight: '120%'
            }}>
              {value}
            </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',
            position: 'relative'
          }}>
            {[...Array(5)].map((_, i) => (
              <div key={i} style={{
                width: '100%',
                height: '1.5px',
                backgroundColor: '#c7c9ce',
                opacity: 0.2
              }} />
            ))}

            {/* Chart lines */}
            <img 
              src="https://dashboard.codeparrot.ai/api/image/Z6N6FzRi7Jes38-H/group-82.png"
              alt="Chart lines"
              style={{
                position: 'absolute',
                width: '100%',
                height: '100%',
                top: 0,
                left: 0
              }}
            />

            {/* Tooltip */}
            <div style={{
              position: 'absolute',
              top: '30%',
              left: '50%',
              transform: 'translateX(-50%)'
            }}>
              <div style={{
                backgroundColor: '#0aa690',
                padding: '8px 12px',
                borderRadius: '6px',
                minWidth: '105px'
              }}>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px'
                }}>
                  <span style={{
                    color: '#fff',
                    fontSize: '18px',
                    fontFamily: 'Chivo'
                  }}>700</span>
                  <img src="https://dashboard.codeparrot.ai/api/image/Z6N6FzRi7Jes38-H/group-87.png" alt="icon" style={{width: '15px', height: '15px'}} />
                </div>
                <span style={{
                  color: '#fff',
                  fontSize: '12px',
                  fontFamily: 'Chivo',
                  opacity: 0.8
                }}>apprenants</span>
              </div>
              <div style={{
                width: 0,
                height: 0,
                borderLeft: '18px solid transparent',
                borderRight: '18px solid transparent',
                borderTop: '17px solid #0aa690',
                position: 'relative',
                left: '50%',
                transform: 'translateX(-50%)'
              }} />
              <div style={{
                width: '12px',
                height: '12px',
                backgroundColor: '#0aa690',
                borderRadius: '50%',
                border: '1.5px solid #0aa690',
                position: 'relative',
                left: '50%',
                transform: 'translateX(-50%)',
                marginTop: '4px'
              }} />
            </div>
          </div>

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

export default LearnersChartSection;

