"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, } from "recharts";
import { cn } from "../../../utils/cn";
const DEFAULT_BAR_COLOR = "#404040";
export const BarChart = ({ data, title, barColor = DEFAULT_BAR_COLOR, colors, className, ariaLabel, height = 280, }) => {
    const safeData = Array.isArray(data) ? data : [];
    const description = ariaLabel ||
        (title ? `${title}: ${safeData.length} kategori` : "Grafik batang");
    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(RechartsBarChart, { data: safeData, margin: { top: 8, right: 8, bottom: 8, left: 8 }, layout: "vertical", accessibilityLayer: true, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--color-neutral-200, #e5e5e5)", horizontal: false }), _jsx(XAxis, { type: "number", tick: { fontSize: 12 } }), _jsx(YAxis, { type: "category", dataKey: "name", width: 80, tick: { fontSize: 12 } }), _jsx(Tooltip, { formatter: (value) => [value, "Jumlah"], contentStyle: {
                                borderRadius: "8px",
                                border: "1px solid var(--color-neutral-200, #e5e5e5)",
                            } }), _jsx(Bar, { dataKey: "value", radius: [0, 4, 4, 0], fill: barColor, children: colors &&
                                colors.length > 0 &&
                                safeData.map((_, index) => (_jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))) })] }) })] }));
};
