"use client";

import { useMemo } from "react";

import { useDeveloperDetail } from "@/lib/analytics-api";

import { ChartShell } from "./ChartShell";

export function PrinzipQuartirographyPie({
  developerId = "6208_0",
}: {
  developerId?: string;
}) {
  const { data, isLoading } = useDeveloperDetail(developerId);

  const option = useMemo(() => {
    const rows = data
      ? [
          { name: "1-к", value: data.agg_one_room ?? 0 },
          { name: "2-к", value: data.agg_two_room ?? 0 },
          { name: "3-к", value: data.agg_three_room ?? 0 },
          { name: "4+", value: data.agg_four_plus ?? 0 },
        ]
      : [];
    return {
      tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
      legend: { bottom: 0 },
      series: [
        {
          type: "pie",
          radius: ["45%", "70%"],
          label: { formatter: "{b}\n{d}%" },
          data: rows,
          color: ["#94a3b8", "#3b82f6", "#0a7a3a", "#c2410c"],
        },
      ],
    };
  }, [data]);

  return <ChartShell option={option} loading={isLoading} height={300} />;
}
