'use client'
// src/components/charts/SparkLine.tsx
// Input: points (number[]), width, height, color
// Output: tiny inline SVG line chart with no axes
// Rationale: used in project cards and tables for at-a-glance activity

import { useMemo } from 'react'

export interface SparkLineProps {
  points: number[]
  width?: number
  height?: number
  color?: string
  className?: string
}

export function SparkLine({
  points,
  width = 80,
  height = 24,
  color = '#3DB8E8',
  className,
}: SparkLineProps) {
  const path = useMemo(() => {
    if (points.length < 2) return ''
    const min = Math.min(...points)
    const max = Math.max(...points)
    const range = max - min || 1
    const padY = 2
    const scaleX = width / (points.length - 1)
    const scaleY = (height - padY * 2) / range

    return points
      .map((v, i) => {
        const x = i * scaleX
        const y = padY + (max - v) * scaleY
        return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
      })
      .join(' ')
  }, [points, width, height])

  if (!path) return null

  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      className={className}
      aria-hidden="true"
    >
      <path d={path} stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  )
}