'use client'

import { cn } from '@/lib/utils'

interface LineChartProps {
  className?: string
  height?: number
  data?: number[]
}

export default function LineChart({
  className,
  height = 160,
  data = [],
}: LineChartProps) {
  const points = data.length >= 2
    ? data
        .map((v, i) => {
          const x = (i / Math.max(1, data.length - 1)) * 100
          const y = 100 - Math.min(100, Math.max(0, v))
          return `${x},${y}`
        })
        .join(' ')
    : '0,100 100,100'

  return (
    <div
      className={cn(
        'rounded-lg bg-dark-200/80 border border-white/5 overflow-hidden',
        className
      )}
      style={{ height }}
    >
      {data.length >= 2 ? (
        <svg
          viewBox="0 0 100 100"
          preserveAspectRatio="none"
          className="w-full h-full text-cyan-500/30"
        >
          <polyline
            fill="none"
            stroke="currentColor"
            strokeWidth="0.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            points={points}
            className="transition-all duration-500"
          />
        </svg>
      ) : (
        <div className="flex h-full items-center justify-center text-gray-600 text-sm">
          —
        </div>
      )}
    </div>
  )
}