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

export interface SparklineProps {
  data: number[];
  color?: string;
  width?: number | `${number}%`;
  height?: number;
  strokeWidth?: number;
}

export default function Sparkline({
  data,
  color = "var(--primary)",
  width = "100%",
  height = 32,
  strokeWidth = 1.5,
}: SparklineProps) {
  if (data.length === 0) {
    return <div style={{ width, height }} />;
  }

  const chartData = data.map((value, index) => ({ index, value }));

  return (
    <ResponsiveContainer width={width} height={height}>
      <LineChart data={chartData} margin={{ top: 2, right: 2, bottom: 2, left: 2 }}>
        <YAxis hide domain={["dataMin", "dataMax"]} />
        <Line
          type="monotone"
          dataKey="value"
          stroke={color}
          strokeWidth={strokeWidth}
          dot={false}
          isAnimationActive={false}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}
