/**
 * KRA - Pie Chart Component
 */
import React, { useMemo } from 'react';
import BaseChart from './BaseChart';
import type { EChartsOption } from 'echarts';

interface PieChartProps {
  data: { name: string; value: number }[];
  title?: string;
  radius?: string | [string, string];
  roseType?: 'radius' | 'area' | false;
  width?: string | number;
  height?: string | number;
  loading?: boolean;
}

const PieChart: React.FC<PieChartProps> = ({
  data,
  title,
  radius = '50%',
  roseType = false,
  width,
  height = 300,
  loading,
}) => {
  const option: EChartsOption = useMemo(() => ({
    title: title ? { text: title, left: 'center' } : undefined,
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: title || '数据',
        type: 'pie',
        radius,
        roseType: roseType || undefined,
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }), [data, title, radius, roseType]);

  return <BaseChart option={option} width={width} height={height} loading={loading} />;
};

export default PieChart;
