'use client';

/**
 * Sparkline — Tiny inline area chart for KPI cards.
 *
 * Features:
 * - Uses Recharts <AreaChart> in <ResponsiveContainer>
 * - Default size: 80×32px
 * - No axes, no grid, no tooltip — pure visual indicator
 * - Gradient fill matching the trend color
 * - Unique gradient ID to avoid conflicts with multiple sparklines
 *
 * Requirements: 4.1, 4.3, 4.4
 */

import { useId } from 'react';
import { AreaChart, Area, ResponsiveContainer } from 'recharts';

export interface SparklineProps {
  data: number[];
  color: string;
  width?: number;
  height?: number;
}

export default function Sparkline({
  data,
  color,
  width = 80,
  height = 32,
}: SparklineProps) {
  const uniqueId = useId();
  const gradientId = `sparkline-gradient-${uniqueId}`;

  // Transform number[] into the format Recharts expects
  const chartData = data.map((value, index) => ({ index, value }));

  if (data.length === 0) {
    return null;
  }

  return (
    <div style={{ width, height }}>
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={chartData} margin={{ top: 2, right: 2, left: 2, bottom: 2 }}>
          <defs>
            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={color} stopOpacity={0.4} />
              <stop offset="95%" stopColor={color} stopOpacity={0} />
            </linearGradient>
          </defs>
          <Area
            type="monotone"
            dataKey="value"
            stroke={color}
            strokeWidth={1.5}
            fill={`url(#${gradientId})`}
            isAnimationActive={false}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}