import { useMemo } from 'react';
import { BaseChart } from '../BaseChart';
import type { EChartsOption } from 'echarts';

interface PieDataItem {
  name: string;
  value: number;
  color?: string;
}

interface PieChartProps {
  data: PieDataItem[];
  height?: number;
  className?: string;
  /** 도넛 차트 내부 반지름 (0이면 일반 파이) */
  innerRadius?: number;
  outerRadius?: number;
}

export function PieChart({ data, height = 200, className, innerRadius = 35, outerRadius = 65 }: PieChartProps) {
  const option = useMemo<EChartsOption>(() => ({
    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
    series: [{
      type: 'pie',
      radius: [innerRadius, outerRadius],
      center: ['50%', '50%'],
      padAngle: 2,
      itemStyle: { borderRadius: 4 },
      label: { show: false },
      data: data.map(d => ({
        name: d.name,
        value: d.value,
        ...(d.color ? { itemStyle: { color: d.color } } : {}),
      })),
    }],
  }), [data, innerRadius, outerRadius]);

  return <BaseChart option={option} height={height} className={className} />;
}
