'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
export function ModuleProgressChart({ modules, className }) {
    if (modules.length === 0) {
        return (_jsx("div", { "data-testid": "module-progress-empty", className: "text-muted-foreground flex flex-col items-center justify-center py-12 text-center", children: _jsx("p", { className: "text-xs", children: "No modules to display. Create a module to track progress." }) }));
    }
    return (_jsxs("div", { "data-testid": "module-progress-chart", className: className, children: [_jsx("h3", { className: "mb-3 text-xs font-medium", children: "Module Progress" }), _jsx(ResponsiveContainer, { width: "100%", height: Math.max(180, modules.length * 40 + 40), children: _jsxs(BarChart, { data: modules, layout: "vertical", margin: { left: 80, right: 40 }, children: [_jsx(XAxis, { type: "number", domain: [0, 100], tick: { fontSize: 10 }, unit: "%" }), _jsx(YAxis, { type: "category", dataKey: "moduleName", tick: { fontSize: 10 }, width: 75 }), _jsx(Tooltip, { formatter: (value) => [`${value}%`, 'Progress'], contentStyle: {
                                fontSize: 11,
                                borderRadius: 8,
                                border: '1px solid hsl(var(--border))',
                            } }), _jsx(Bar, { dataKey: "progressPercent", fill: "hsl(var(--primary))", radius: [0, 4, 4, 0] })] }) }), _jsx("div", { className: "mt-3 space-y-1", children: modules.map((mod) => (_jsxs("div", { className: "flex items-center justify-between text-[10px]", children: [_jsx("span", { className: "text-muted-foreground", children: mod.moduleName }), _jsxs("span", { children: [mod.completedItems, "/", mod.totalItems, " items \u00B7 ", mod.progressPercent, "%"] })] }, mod.moduleId))) })] }));
}
