import { useMemo } from 'react';
import Chart from 'react-apexcharts';

export const PieChart = ({
  series = [],
  labels = [],
  title = '',
  height = 350,
  colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
  showLegend = true,
  className = '',
  ...props
}) => {
  const chartOptions = useMemo(() => ({
    chart: {
      type: 'pie',
      height: height,
      toolbar: {
        show: false,
      },
    },
    colors: colors,
    labels: labels,
    legend: {
      show: showLegend,
      position: 'bottom',
    },
    dataLabels: {
      enabled: true,
      formatter: (val) => `${val.toFixed(1)}%`,
    },
    tooltip: {
      theme: 'light',
      y: {
        formatter: (val) => `${val}`,
      },
    },
    plotOptions: {
      pie: {
        donut: {
          size: '0%',
        },
      },
    },
  }), [labels, colors, height, showLegend]);

  return (
    <div className={className}>
      {title && (
        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
      )}
      <Chart
        options={chartOptions}
        series={series}
        type="pie"
        height={height}
        {...props}
      />
    </div>
  );
};

export default PieChart;

