import React from 'react';

export default function LineChart({ data }) {
  if (!data || data.length === 0) {
    return <div className="text-gray-400 text-center">Aucune donnée</div>;
  }

  // Hauteur max du graphique en pixels
  const chartHeight = 120;
  const maxValue = Math.max(...data.map((d) => d.value), 1);

  // Trouver les indices des barres ayant la valeur max (pour gérer les égalités)
  const maxIndices = data
    .map((d, idx) => (d.value === maxValue ? idx : -1))
    .filter((idx) => idx !== -1);

  return (
    <div className="w-full flex space-x-4">
      {data.map((point, idx) => {
        const barHeight = Math.max((point.value / maxValue) * chartHeight, 8);
        const isMax = maxIndices.includes(idx);
        return (
          <div key={idx} className="flex flex-col items-center flex-1">
            {/* Valeur au-dessus de la barre — hors de la zone hauteur fixe */}
            <span className="text-xs mb-1 text-gray-700 font-semibold">
              {point.value}
            </span>
            {/* Zone barres à hauteur fixe, alignées en bas */}
            <div
              className="w-full flex items-end justify-center"
              style={{ height: chartHeight }}
            >
              <div
                className={`${isMax ? 'bg-tertiary' : 'bg-blue-400'} rounded-t w-4`}
                style={{ height: `${barHeight}px`, transition: 'height 0.3s' }}
                title={`${point.month}: ${point.value}`}
              />
            </div>
            {/* Label mois en dessous */}
            <span className="text-xs mt-1 text-gray-600">{point.month}</span>
          </div>
        );
      })}
    </div>
  );
}
