"use client";

import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
import { NETWORKS } from "@/lib/mock-data";

const COLORS: Record<string, string> = {
  zong: "#8DD124",
  jazz: "#6B2027",
  ufone: "#F2760D",
};

export function NetworkDonut({ data }: { data: Record<string, number> }) {
  const chartData = NETWORKS.map((n) => ({
    name: n.label,
    value: data[n.id] ?? 0,
    id: n.id,
  }));
  const total = chartData.reduce((s, d) => s + d.value, 0);

  return (
    <div className="relative">
      <ResponsiveContainer width="100%" height={220}>
        <PieChart>
          <Pie
            data={chartData}
            dataKey="value"
            nameKey="name"
            innerRadius={62}
            outerRadius={90}
            paddingAngle={3}
            strokeWidth={0}
          >
            {chartData.map((d) => (
              <Cell key={d.id} fill={COLORS[d.id]} />
            ))}
          </Pie>
          <Tooltip
            contentStyle={{
              background: "#141824",
              border: "none",
              borderRadius: 12,
              fontSize: 12,
              color: "#F3F5F8",
            }}
            formatter={(value: number, name: string) => [`${value} orders`, name]}
          />
        </PieChart>
      </ResponsiveContainer>
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
        <p className="font-display text-xl font-bold">{total}</p>
        <p className="text-[11px] text-muted">Total Orders</p>
      </div>
    </div>
  );
}