import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';

interface DonutDatum {
  name: string;
  value: number;
  color: string;
}

interface MiniDonutChartProps {
  data: DonutDatum[];
  height?: number;
  innerRadius?: number;
  outerRadius?: number;
}

export default function MiniDonutChart({
  data,
  height = 120,
  innerRadius = 28,
  outerRadius = 48,
}: MiniDonutChartProps) {
  const filtered = data.filter(d => d.value > 0);
  if (filtered.length === 0) return null;

  return (
    <ResponsiveContainer width="100%" height={height}>
      <PieChart>
        <Pie
          data={filtered}
          cx="50%"
          cy="50%"
          innerRadius={innerRadius}
          outerRadius={outerRadius}
          paddingAngle={2}
          dataKey="value"
          stroke="none"
        >
          {filtered.map((entry, i) => (
            <Cell key={i} fill={entry.color} />
          ))}
        </Pie>
        <Tooltip
          formatter={(value, name) => [`${value}`, `${name}`]}
          contentStyle={{ fontSize: 12, padding: '4px 8px', borderRadius: 6 }}
        />
      </PieChart>
    </ResponsiveContainer>
  );
}
