import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Chart as ChartJS, ArcElement, Tooltip, Legend, } from "chart.js";
import { Doughnut } from "react-chartjs-2";
import { formatLabel } from "../../../utils";
import styles from "./styles.module.scss";
ChartJS.register(ArcElement, Tooltip, Legend);
function DoughnutChart({ data, textVariant = "base", hollowPercent = 72, heading, backgroundColors = [
    "#FACC15",
    "#3B82F6",
    "#14B8A6",
    "#EC4899",
    "#F59E0B",
    "#6266F1",
], }) {
    const labels = data.map((item) => item.label);
    const numbers = data.map((item) => item.number);
    const chartData = {
        labels,
        datasets: [
            {
                data: numbers,
                backgroundColor: backgroundColors,
                hoverBackgroundColor: backgroundColors,
                borderWidth: 1,
                borderColor: "#212121",
            },
        ],
    };
    const options = {
        responsive: true,
        maintainAspectRatio: false,
        aspectRatio: 1,
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                enabled: true,
                displayColors: false,
                position: "nearest",
                callbacks: {
                    title: () => "",
                    label: (tooltipItem) => {
                        const label = tooltipItem.label || "";
                        const value = tooltipItem.raw || 0;
                        return formatLabel(`${label} - ${value}`, 25);
                    },
                },
                backgroundColor: "#d5d5d5",
                bodyColor: "#000",
                bodyFont: {
                    size: 14,
                    family: "Inter",
                },
                padding: 10,
                borderWidth: 1,
                cornerRadius: 3,
            },
        },
        cutout: `${hollowPercent}%`,
    };
    return (_jsxs("div", { className: styles.doughnutChartContainer, children: [_jsx(Doughnut, { data: chartData, options: options }), _jsx("div", { className: `${styles.centerText} ${styles[`text-${textVariant}`]}`, children: heading })] }));
}
export default DoughnutChart;
