"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend, } from "recharts";
import { cn } from "../../../utils/cn";
const DEFAULT_COLORS = [
    "#404040",
    "#737373",
    "#a3a3a3",
    "#d4d4d4",
    "#525252",
    "#262626",
];
export const PieChart = ({ data, title, colors = DEFAULT_COLORS, className, ariaLabel, height = 280, }) => {
    const safeData = Array.isArray(data) ? data.filter((d) => d.value > 0) : [];
    const description = ariaLabel ||
        (title ? `${title}: ${safeData.length} kategori` : "Grafik lingkaran");
    return (_jsxs("div", { className: cn("w-full", className), role: "img", "aria-label": description, children: [title && (_jsx("h3", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-3", children: title })), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(RechartsPieChart, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, accessibilityLayer: true, children: [_jsx(Pie, { data: safeData, dataKey: "value", nameKey: "name", cx: "50%", cy: "50%", outerRadius: "80%", label: ({ name, percent }) => percent > 0.05 ? `${name} (${(percent * 100).toFixed(0)}%)` : "", children: safeData.map((_, index) => (_jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))) }), _jsx(Tooltip, { formatter: (value) => [value, "Jumlah responden"], contentStyle: {
                                borderRadius: "8px",
                                border: "1px solid var(--color-neutral-200, #e5e5e5)",
                            } }), _jsx(Legend, {})] }) })] }));
};
