import React from "react";
import { formatNumber, COLORS } from "@/lib/structured-products-utils";

interface ChartLegendProps {
  data: Array<{ name: string; y: number; percentage: string }>;
  hiddenItems: Set<string>;
  onToggleItem: (name: string) => void;
}

export const ChartLegend: React.FC<ChartLegendProps> = ({
  data,
  hiddenItems,
  onToggleItem,
}) => {
  if (!data || data.length === 0) {
    return null;
  }

  return (
    <div className="mt-6 space-y-2 max-h-64 overflow-y-auto">
      {data.map((item, index) => {
        const isHidden = hiddenItems.has(item.name);
        return (
          <div
            key={index}
            className={`flex items-center justify-between text-sm cursor-pointer rounded-lg px-2 py-1.5 transition-all hover:bg-slate-50 ${
              isHidden ? 'opacity-50' : ''
            }`}
            onClick={() => onToggleItem(item.name)}
          >
            <div className="flex items-center gap-2">
              <div
                className="h-3 w-3 rounded-lg"
                style={{ backgroundColor: COLORS[index % COLORS.length] }}
              />
              <span className={`text-slate-700 ${isHidden ? 'line-through' : ''}`}>
                {item.name}
              </span>
            </div>
            <span className={`font-medium text-slate-900 ${isHidden ? 'line-through' : ''}`}>
              {formatNumber(item.y)} ({item.percentage}%)
            </span>
          </div>
        );
      })}
    </div>
  );
};