interface Props {
  data: number[];
  width?: number;
  height?: number;
  className?: string;
}

export default function PriceSparkline({ data, width = 80, height = 24, className = '' }: Props) {
  if (data.length < 2) return null;

  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;
  const padding = 1;

  const points = data.map((val, i) => {
    const x = padding + (i / (data.length - 1)) * (width - padding * 2);
    const y = padding + (1 - (val - min) / range) * (height - padding * 2);
    return `${x},${y}`;
  }).join(' ');

  // Color based on trend: green if last < first, red if up, gray if flat
  const trend = data[data.length - 1] - data[0];
  const color = trend < 0 ? '#4ade80' : trend > 0 ? '#f87171' : '#6b7280';

  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      className={className}
      aria-label="Prijstrend"
    >
      <polyline
        points={points}
        fill="none"
        stroke={color}
        strokeWidth={1.5}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      {/* Dot at current (last) price */}
      <circle
        cx={parseFloat(points.split(' ').pop()!.split(',')[0])}
        cy={parseFloat(points.split(' ').pop()!.split(',')[1])}
        r={2}
        fill={color}
      />
    </svg>
  );
}