import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
import { demoMaterials } from '@/lib/demoData';

const palette = ['#00f2ff', '#0096c7', '#48cae4', '#90e0ef', '#ade8f4', '#caf0f8', '#00b4d8', '#023e8a'];

const CostDonut = () => {
  const data = demoMaterials.map((m, i) => ({ name: m.name, value: m.pct, color: palette[i % palette.length] }));
  const total = demoMaterials.reduce((s, m) => s + m.price, 0);
  return (
    <div className="glass-panel p-3">
      <div className="mb-2 text-[10px] uppercase tracking-[.18em] text-cyan-400">Material Cost Breakdown</div>
      <div className="flex items-center gap-2">
        <div className="relative h-28 w-28 shrink-0">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie data={data} dataKey="value" innerRadius={32} outerRadius={52} paddingAngle={1} stroke="none">
                {data.map((d, i) => <Cell key={i} fill={d.color} />)}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
          <div className="absolute inset-0 grid place-items-center text-center">
            <div>
              <div className="text-[8px] uppercase text-slate-500">Total</div>
              <div className="text-[12px] font-semibold text-white">${total}</div>
            </div>
          </div>
        </div>
        <div className="grid flex-1 grid-cols-2 gap-x-2 gap-y-0.5">
          {data.map((d, i) => (
            <div key={i} className="flex items-center gap-1.5 text-[9px]">
              <span className="h-2 w-2 shrink-0 rounded-sm" style={{ background: d.color }} />
              <span className="truncate text-slate-400">{d.name}</span>
              <span className="ml-auto text-slate-500">{d.value}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
export default CostDonut;