import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CheckCircleIcon } from "lucide-react";
import { useState } from "react";
/**
 * Displays a collapsible category of upload results
 *
 * @example
 * <UploadResultCategory
 *   title="Successfully Uploaded"
 *   count={3}
 *   icon={<CheckCircleIcon className="h-4 w-4 text-green-500" />}
 *   items={["document1.pdf", "document2.pdf", "document3.pdf"]}
 * />
 */
export function UploadResultCategory({ title, count, icon = _jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-500" }), items }) {
    const [isExpanded, setIsExpanded] = useState(false);
    return (_jsxs("div", { className: "border border-color-border rounded-md overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between p-3 bg-color-muted/10 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "mr-2", children: icon }), _jsx("span", { className: "font-medium", children: title }), _jsx("span", { className: "ml-2 px-2 py-0.5 bg-color-muted/20 rounded-full text-xs", children: count })] }), _jsx("button", { className: "text-muted", children: _jsx("svg", { className: `h-5 w-5 transition-transform ${isExpanded ? 'transform rotate-180' : ''}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })] }), isExpanded && (_jsx("div", { className: "p-3 border-t border-color-border max-h-48 overflow-y-auto", children: items.length > 0 ? (_jsx("ul", { className: "space-y-1", children: items.map((item, index) => (_jsx("li", { className: "text-sm py-1 px-2 rounded hover:bg-color-muted/10", children: item }, index))) })) : (_jsx("div", { className: "text-sm text-muted py-2", children: "No items to display" })) }))] }));
}
//# sourceMappingURL=UploadResultCategory.js.map