import { Line, LineChart, ResponsiveContainer } from "recharts";
import type { RecentSample } from "../../shared/api";

interface MiniSparklineProps {
  data: RecentSample[];
}

export function MiniSparkline({ data }: MiniSparklineProps) {
  const chartData = data
    .filter((s) => s.durationMs !== null)
    .map((s) => ({ duration: s.durationMs! }))
    .reverse();

  if (chartData.length === 0) {
    return <span className="sparkline-empty">-</span>;
  }

  return (
    <ResponsiveContainer width="100%" height={40}>
      <LineChart data={chartData}>
        <Line type="monotone" dataKey="duration" stroke="#356dd2" strokeWidth={1.5} dot={false} />
      </LineChart>
    </ResponsiveContainer>
  );
}