// src/components/Legend.tsx
import React from 'react';

interface LegendProps {
  getColor: (count: number) => string;
  maxCount: number;
}

const Legend: React.FC<LegendProps> = ({ getColor, maxCount }) => {
  // Dynamically generate grades based on the maxCount of the current dataset
  const grades = [
    1,
    Math.round(maxCount / 5),
    Math.round(maxCount / 2.5),
    Math.round(maxCount / 1.5),
    maxCount
  ];
  
  // Remove duplicates and filter out zero or invalid numbers, then sort
  const uniqueGrades = [...new Set(grades)].filter(g => g > 0).sort((a,b) => a-b);
  if (uniqueGrades.length > 1 && uniqueGrades[1] <= 1) {
      uniqueGrades.shift(); // remove the '1' if the next step is too close
  }

  return (
    <>
      <style>{`
        .legend {
          position: absolute;
          bottom: 20px;
          right: 20px;
          padding: 10px;
          background: rgba(255, 255, 255, 0.8);
          color: #333;
          border-radius: 5px;
          box-shadow: 0 0 15px rgba(0,0,0,0.2);
          z-index: 1000; /* Ensure it's on top of the map */
        }
        .legend h4 {
          margin: 0 0 5px 0;
          text-align: center;
        }
        .legend i {
          width: 18px;
          height: 18px;
          float: left;
          margin-right: 8px;
          opacity: 0.7;
        }
      `}</style>
      <div className="legend">
        <h4>Count</h4>
        {uniqueGrades.map((grade, index) => {
          const from = grade;
          const to = uniqueGrades[index + 1];
          return (
            <div key={from}>
              <i style={{ background: getColor(from) }}></i>
              {from}{to ? `–${to - 1}` : '+'}
            </div>
          );
        })}
      </div>
    </>
  );
};

export default Legend;