import React from 'react';

interface SparklineProps {
  /** Series, oldest first. Fewer than two points renders a flat baseline. */
  points: number[];
  color?: string;
  height?: number;
  /** ``true`` plots against 0-100 so a barely-moving prompt reads as flat. */
  fixedScale?: boolean;
}

const Sparkline = ({
  points,
  color = 'currentColor',
  height = 16,
  fixedScale = false,
}: SparklineProps): JSX.Element => {
  const width = 100;
  const series = points.length >= 2 ? points : [0, 0];
  const max = fixedScale ? 100 : Math.max(...series);
  const min = fixedScale ? 0 : Math.min(...series);
  const span = max - min || 1;
  const path = series
    .map((point, index) => {
      const x = (index / (series.length - 1)) * width;
      const y = height - ((point - min) / span) * (height - 3) - 1.5;

      return `${x.toFixed(1)},${y.toFixed(1)}`;
    })
    .join(' ');

  return (
    <svg
      viewBox={`0 0 ${width} ${height}`}
      preserveAspectRatio="none"
      style={{ width: '100%', height, display: 'block', overflow: 'visible' }}
      aria-hidden="true"
    >
      <polyline
        points={path}
        fill="none"
        stroke={color}
        strokeWidth={1.6}
        strokeLinecap="round"
        strokeLinejoin="round"
        vectorEffect="non-scaling-stroke"
      />
    </svg>
  );
};

export default Sparkline;