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

export default function ChartPanel({ data, metric }) {
  const formatted = data.timestamps.map((t, i) => ({
    time: new Date(t).toLocaleTimeString(),
    avg: data[metric].avg[i],
    max: data[metric].max[i],
    min: data[metric].min[i],
  }));

  return (
    <div className="h-64">
      <ResponsiveContainer>
        <LineChart data={formatted}>
          <XAxis dataKey="time" hide />
          <Tooltip />
          <Line dataKey="avg" stroke="#00ffcc" />
          <Line dataKey="max" stroke="#ff4d4f" />
          <Line dataKey="min" stroke="#8884d8" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}