import React from 'react'

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

export function Sparkline({
    data,
    width = 120,
    height = 40,
    color = 'currentColor',
    strokeWidth = 2
}: SparklineProps) {
    if (!data || data.length < 2) {
        return null
    }

    // Normalize data to fit height
    const min = Math.min(...data)
    const max = Math.max(...data)
    const range = max - min || 1 // Avoid division by zero

    // Calculate points
    const points = data.map((value, index) => {
        const x = (index / (data.length - 1)) * width
        const y = height - ((value - min) / range) * height
        return `${x},${y}`
    }).join(' ')

    return (
        <svg width={width} height={height} className="overflow-visible">
            <polyline
                points={points}
                fill="none"
                stroke={color}
                strokeWidth={strokeWidth}
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </svg>
    )
}