"use client"
import React from "react"
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"
import { Pie } from "react-chartjs-2"

ChartJS.register(ArcElement, Tooltip, Legend)

type Props = {
  labels: string[]
  data: number[]
  backgroundColor?: string[]
}

export default function PieChart({ labels, data: values, backgroundColor }: Props) {
  const data = {
    labels,
    datasets: [
      {
        data: values,
        backgroundColor: backgroundColor || ["#4ade80", "#60a5fa", "#f97316", "#f43f5e"],
        hoverOffset: 6,
      },
    ],
  }

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: { legend: { position: "right" as const } },
  }

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