"use client"
import React from "react"
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from "chart.js"
import { Line } from "react-chartjs-2"

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
)

type Props = {
  labels: string[]
  datasets: Array<{
    label?: string
    data: number[]
    borderColor?: string
    backgroundColor?: string
    fill?: boolean
  }>
}

export default function LineChart({ labels, datasets }: Props) {
  const data = {
    labels,
    datasets: datasets.map((d) => ({
      label: d.label,
      data: d.data,
      borderColor: d.borderColor || "rgba(75,192,192,1)",
      backgroundColor: d.backgroundColor || "rgba(75,192,192,0.2)",
      fill: d.fill ?? true,
      tension: 0.3,
      pointRadius: 3,
    })),
  }

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { position: "top" as const },
      title: { display: false },
    },
    scales: {
      x: { grid: { display: false } },
      y: { beginAtZero: true },
    },
  }

  return (
    <div style={{ width: "100%", minHeight: 240 }}>
      <Line data={data} options={options} />
    </div>
  )
}