"use client";

import React from "react";

/**
 * Legende als eigene Komponente statt Recharts-Legend:
 * Recharts platziert die Legende im SVG und kostet damit Chartfläche.
 * Carbon setzt sie über den Chart, linksbündig, 12 px, 12 px Marker.
 *
 * Alle Einträge tragen denselben Marker und unterscheiden sich nur durch die
 * Farbe. Die Vergleichsreihe ist im Diagramm grau und gestrichelt; in der
 * Legende genügt das Grau. Ein zweiter Markertyp daneben bringt keine
 * zusätzliche Auskunft, kostet aber die ruhige Reihe gleicher Formen.
 */
export function ChartLegende({
  eintraege,
  /** Ausgeblendete Reihen erscheinen ausgegraut: Klick schaltet um. */
  inaktiv = [],
  onToggle,
}: {
  eintraege: { name: string; farbe: string; wert?: string }[];
  inaktiv?: string[];
  onToggle?: (name: string) => void;
}) {
  return (
    <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
      {eintraege.map((eintrag) => {
        const aus = inaktiv.includes(eintrag.name);
        const Inhalt = (
          <>
            <span
              className="h-2.5 w-2.5 flex-none rounded-sm"
              style={{ background: eintrag.farbe, opacity: aus ? 0.35 : 1 }}
            />
            <span
              className="text-[12px]"
              style={{ color: aus ? "#a8a8a8" : "#525252" }}
            >
              {eintrag.name}
            </span>
            {eintrag.wert ? (
              <span className="text-[12px] font-semibold tabular-nums text-text-neutral-primary">
                {eintrag.wert}
              </span>
            ) : null}
          </>
        );

        return onToggle ? (
          <button
            key={eintrag.name}
            onClick={() => onToggle(eintrag.name)}
            className="flex items-center gap-1.5 rounded px-1 py-0.5 hover:bg-neutral-50"
          >
            {Inhalt}
          </button>
        ) : (
          <span key={eintrag.name} className="flex items-center gap-1.5">
            {Inhalt}
          </span>
        );
      })}
    </div>
  );
}