import type React from 'react'

interface SparkProps {
  points: number[]
  w?: number
  h?: number
  accent?: boolean
}

export function Spark({ points, w = 60, h = 16, accent = false }: SparkProps): React.JSX.Element {
  const ptStr = points
    .map((v, i) => `${((i / Math.max(points.length - 1, 1)) * w).toFixed(1)},${v.toFixed(1)}`)
    .join(' ')

  return (
    <svg
      width={w}
      height={h}
      viewBox={`0 0 ${w} ${h}`}
      preserveAspectRatio="none"
      style={{ display: 'block' }}
    >
      <polyline points={ptStr} className={'spark' + (accent ? ' accent' : '')} />
    </svg>
  )
}