"use client";

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

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

function fmtBps(v: number) {
  const units = ["bps","Kbps","Mbps","Gbps"];
  let val = v, i = 0;
  while (val >= 1000 && i < units.length-1) { val /= 1000; i++; }
  const digits = val < 10 && i > 0 ? 2 : 0;
  return `${val.toFixed(digits)} ${units[i]}`;
}

export default function TrafficChart({ data, series }: { data: Point[]; series: string[] }) {
  return (
    <div className="h-64 w-full">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data}>
          <XAxis dataKey="t" tick={{ fontSize: 12 }} />
          <YAxis tick={{ fontSize: 12 }} tickFormatter={(v)=>fmtBps(Number(v))} />
          <Tooltip formatter={(v:any)=>fmtBps(Number(v))} />
          <Legend />
          {series.map((s) => (
            <Line key={s} type="monotone" dataKey={s} dot={false} strokeWidth={2} />
          ))}
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}