'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
export function BurndownChart({ dataPoints, cycleName, totalItems, completedItems, className, }) {
    if (dataPoints.length === 0) {
        return (_jsx("div", { "data-testid": "burndown-chart-empty", className: "text-muted-foreground flex flex-col items-center justify-center py-12 text-center", children: _jsx("p", { className: "text-xs", children: "No burndown data available. Set start and end dates on the cycle." }) }));
    }
    return (_jsxs("div", { "data-testid": "burndown-chart", className: className, children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsxs("h3", { className: "text-xs font-medium", children: [cycleName, " \u2014 Burndown"] }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: [completedItems, "/", totalItems, " completed"] })] }), _jsx(ResponsiveContainer, { width: "100%", height: 280, children: _jsxs(LineChart, { data: dataPoints, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", className: "stroke-border" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 10 }, tickFormatter: (v) => v.slice(5), className: "fill-muted-foreground" }), _jsx(YAxis, { tick: { fontSize: 10 }, className: "fill-muted-foreground" }), _jsx(Tooltip, { contentStyle: { fontSize: 11, borderRadius: 8, border: '1px solid hsl(var(--border))' } }), _jsx(Legend, { iconSize: 8, wrapperStyle: { fontSize: 11 } }), _jsx(Line, { type: "monotone", dataKey: "ideal", stroke: "hsl(var(--muted-foreground))", strokeDasharray: "5 5", dot: false, name: "Ideal" }), _jsx(Line, { type: "monotone", dataKey: "actual", stroke: "hsl(var(--primary))", strokeWidth: 2, dot: { r: 2 }, name: "Actual" })] }) })] }));
}
