'use client';

import {LineChart, Line, ResponsiveContainer, YAxis} from 'recharts';
import {CHART} from './palette';

/**
 * The 40px trend line inside a KPI card.
 *
 * Deliberately never animated: four of these animating on every dashboard load
 * is noise, and they are glanceable context rather than the subject. Astryx's
 * own dashboard template makes the same call.
 */
export function Sparkline<T extends object>({
  data,
  dataKey,
  height = 40,
  tone = 'neutral',
}: {
  data: T[];
  dataKey: Extract<keyof T, string>;
  height?: number;
  /** Semantic tint, for a KPI that is meaningfully up or down. */
  tone?: 'neutral' | 'positive' | 'negative';
}) {
  const stroke =
    tone === 'positive'
      ? CHART.positive
      : tone === 'negative'
        ? CHART.negative
        : CHART.seriesAt(0);

  return (
    <ResponsiveContainer width="100%" height={height}>
      <LineChart data={data} margin={{top: 2, right: 0, bottom: 2, left: 0}}>
        {/* Domain padding keeps a flat-ish series from rendering as a line
            pinned to the top or bottom edge of the box. */}
        <YAxis hide domain={['dataMin - 1', 'dataMax + 1']} />
        <Line
          type="monotone"
          dataKey={dataKey}
          stroke={stroke}
          strokeWidth={1.5}
          dot={false}
          isAnimationActive={false}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}
