import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  type ChartOptions,
} from 'chart.js'
import { Pie } from 'react-chartjs-2'
ChartJS.register(ArcElement, Tooltip, Legend)

export const ChartPie = () => {
  const data = {
    labels: [
      'Pidana',
      'Perdata',
      'Perceraian',
      'Surat Bisnis',
      'Surat Tanah',
      'Lainnya',
    ],
    datasets: [
      {
        data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
        backgroundColor: [
          '#FFB300',
          '#4CAF50',
          '#3F51B5',
          '#F44336',
          '#2196F3',
          '#FF9800',
        ],
        hoverOffset: 4,
      },
    ],
  }

  const options: ChartOptions<'pie'> = {
    maintainAspectRatio: true,
    responsive: false,
    plugins: {
      legend: {
        position: 'right',
        labels: {
          usePointStyle: true,
          pointStyle: 'circle',
          padding: 20,
        },
      },
    },
    layout: {
      padding: 0,
    },
  }

  return (
    <div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 text-center">
      <h2 className="text-xl font-bold">Top 5 Konten</h2>
      <Pie
        height={225}
        width={450}
        data={data}
        options={options}
      />
    </div>
  )
}