"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { SelectionCheckbox } from "./SelectionCheckbox.js";
/**
 * Card grid view for the resource workbench.
 *
 * Renders items as a responsive grid of cards. Each card supports an
 * optional selection checkbox, an action slot, and click handling.
 * Card content is fully customizable via the `renderCard` prop.
 *
 * This component renders **only the card grid**. Search, filters, and
 * pagination are handled by the parent `ResourceWorkbench`.
 */
export function ResourceCards({ items, renderCard, enableSelection = false, selectedIds, onToggleSelection, getItemId = defaultGetId, renderCardAction, onCardClick, "aria-label": ariaLabel = "Resource cards", className, }) {
    return (_jsx("div", { role: "list", "aria-label": ariaLabel, className: cn("grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", className), children: items.map((item, index) => {
            const id = getItemId(item);
            const isSelected = selectedIds?.has(id) ?? false;
            const isClickable = !!onCardClick;
            return (_jsxs("div", { role: "listitem", "aria-selected": enableSelection ? isSelected : undefined, onClick: isClickable
                    ? (e) => {
                        const target = e.target;
                        if (target.closest("button") ||
                            target.closest("input") ||
                            target.closest("[role='menu']")) {
                            return;
                        }
                        onCardClick(item);
                    }
                    : undefined, className: cn("relative flex rounded-lg border border-border bg-card p-4 transition-colors", isSelected && "border-primary/40 bg-primary-subtle", isClickable && "cursor-pointer hover:border-primary/40 hover:bg-accent-hover", isClickable && "focus-within:ring-2 focus-within:ring-ring"), children: [enableSelection && onToggleSelection && (_jsx("div", { className: "absolute left-2 top-2", children: _jsx(SelectionCheckbox, { checked: isSelected, onChange: () => onToggleSelection(id), "aria-label": `Select item ${id}` }) })), _jsx("div", { className: cn("min-w-0 flex-1", enableSelection && "pl-5"), children: renderCard(item, index) }), renderCardAction && (_jsx("div", { className: "ml-2 shrink-0", onClick: (e) => e.stopPropagation(), children: renderCardAction(item) }))] }, id || `card-${index}`));
        }) }));
}
function defaultGetId(item) {
    const r = item;
    if (typeof r.id === "string")
        return r.id;
    if (typeof r.slug === "string")
        return r.slug;
    return "";
}
//# sourceMappingURL=ResourceCards.js.map