import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

export interface Serie {
  schluessel: string;
  name: string;
  farbe: string;
  gestrichelt?: boolean;
}

export type Datenpunkt = { t: number } & Record<string, number>;

interface Props {
  daten: Datenpunkt[];
  serien: Serie[];
}

/** Prozent der Waldfläche über die Zeitschritte */
export default function Verlaufsdiagramm({ daten, serien }: Props) {
  return (
    <div className="diagramm">
      <ResponsiveContainer width="100%" height={260}>
        <LineChart data={daten} margin={{ top: 8, right: 16, bottom: 4, left: 0 }}>
          <CartesianGrid vertical={false} />
          <XAxis dataKey="t" type="number" domain={[0, "dataMax"]} allowDecimals={false} tickLine={false} />
          <YAxis domain={[0, 100]} unit=" %" width={52} tickLine={false} axisLine={false} />
          <Tooltip
            formatter={(wert) => `${Number(wert).toFixed(1)} %`}
            labelFormatter={(t) => `Zeitschritt ${t}`}
            contentStyle={{
              background: "var(--flaeche)",
              border: "1px solid var(--rand)",
              borderRadius: 6,
              color: "var(--text)",
            }}
          />
          <Legend iconType="plainline" />
          {serien.map((s) => (
            <Line
              key={s.schluessel}
              dataKey={s.schluessel}
              name={s.name}
              stroke={s.farbe}
              strokeWidth={2}
              strokeDasharray={s.gestrichelt ? "6 4" : undefined}
              dot={false}
              isAnimationActive={false}
            />
          ))}
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}