import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Boxes, ExternalLink } from "lucide-react";
import { Button } from "../../../components/ui/button";
import { Card } from "../../../components/ui/card";
import { cn } from "../../../lib/utils";
import { getIndexStatus } from "./utils";
/**
 * Displays the indexed items count and status overview
 */
export function IndexStatusCards({ indexStatus, onGoToSettings, }) {
    const { statusLabel, statusClass, hasSettingsIssue } = getIndexStatus(indexStatus);
    return (_jsx(Card, { icon: _jsx(Boxes, { strokeWidth: 1, className: "h-5 w-5" }), title: "Index status", description: "Indexed item count and current index health.", children: _jsxs("div", { className: "flex w-full flex-wrap gap-2", children: [_jsxs("div", { className: "bg-neutral-grey-5 flex-1 rounded p-2", children: [_jsx("div", { className: "text-neutral-grey-50 text-xs", children: "Indexed items" }), _jsx("div", { className: "text-xl font-medium", children: indexStatus.numberOfIndexedItems?.toLocaleString() ?? "0" })] }), _jsxs("div", { className: "bg-neutral-grey-5 flex-1 rounded p-2", children: [_jsx("div", { className: "text-neutral-grey-50 text-xs", children: "Status" }), _jsx("div", { className: "space-y-1", children: _jsxs("div", { className: cn("flex flex-wrap items-center gap-1 text-sm font-medium", statusClass), children: [statusLabel, hasSettingsIssue && (_jsx(Button, { size: "sm", variant: "outline", onClick: onGoToSettings, title: "Go to Settings", children: _jsx(ExternalLink, { className: "h-3 w-3", strokeWidth: 1 }) }))] }) })] })] }) }));
}
//# sourceMappingURL=IndexStatusCards.js.map