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

interface StatusDonutProps {
  down: number;
  up: number;
}

const UP_COLOR = "var(--td-success-color)";
const DOWN_COLOR = "var(--td-error-color)";
const EMPTY_COLOR = "var(--td-bg-color-component-disabled)";

export function StatusDonut({ down, up }: StatusDonutProps) {
  const total = up + down;
  const availability = total > 0 ? ((up / total) * 100).toFixed(1) : "-";

  const data =
    total > 0
      ? [
          { name: "UP", value: up },
          { name: "DOWN", value: down },
        ]
      : [{ name: "EMPTY", value: 1 }];

  const colors = total > 0 ? [UP_COLOR, DOWN_COLOR] : [EMPTY_COLOR];

  return (
    <div className="status-donut">
      <ResponsiveContainer height={180} width="100%">
        <PieChart>
          <Pie cx="50%" cy="50%" data={data} dataKey="value" innerRadius={50} outerRadius={70} stroke="none">
            {data.map((item, index) => (
              <Cell fill={colors[index % colors.length]} key={item.name} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
      <div className="donut-center-label">{total > 0 ? `${availability}%` : "-"}</div>
    </div>
  );
}