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

const data = [
  { name: "Bahan Pokok", value: 34.1 },
  { name: "Lauk Pauk", value: 28.7 },
  { name: "Sayuran", value: 16.5 },
  { name: "Operasional", value: 6.3 },
  { name: "Transportasi", value: 2.3 },
  { name: "Lainnya", value: 12.1 },
];

const COLORS = [
  "hsl(213, 70%, 35%)",
  "hsl(213, 70%, 50%)",
  "hsl(152, 55%, 42%)",
  "hsl(43, 90%, 55%)",
  "hsl(28, 85%, 55%)",
  "hsl(210, 25%, 75%)",
];

export default function IndeksTransparansi() {
  return (
    <div className="bg-card rounded-xl border border-border p-5 sm:p-6">
      <h3 className="font-bold text-foreground mb-4">Indeks Transparansi MBG</h3>
      <div className="flex flex-col sm:flex-row items-center gap-4">
        <ResponsiveContainer width="100%" height={220}>
          <PieChart>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              innerRadius={50}
              outerRadius={85}
              paddingAngle={2}
              dataKey="value"
            >
              {data.map((entry, idx) => (
                <Cell key={idx} fill={COLORS[idx % COLORS.length]} />
              ))}
            </Pie>
            <Tooltip formatter={(v) => `${v}%`} />
          </PieChart>
        </ResponsiveContainer>
        <div className="w-full sm:w-auto space-y-2">
          {data.map((item, idx) => (
            <div key={item.name} className="flex items-center gap-2 text-sm">
              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: COLORS[idx] }} />
              <span className="text-muted-foreground whitespace-nowrap">{item.name}</span>
              <span className="font-bold ml-auto">{item.value}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}