"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
/**
 * Card displaying a resource type icon, count, and label — designed
 * for Library landing pages and resource dashboards.
 *
 * Purely presentational: the consumer provides the count (typically
 * from {@link useAgentCount}, {@link useSkillCount}, or
 * {@link useMcpServerCount}) and the card handles rendering, loading
 * skeletons, and accessible navigation semantics.
 *
 * The root element adapts to the provided props:
 *
 * - `href` → `<a>` (link: right-click, open in new tab, Enter to follow)
 * - `onClick` only → `<button>` (action: Enter/Space to activate)
 * - Neither → `<div>` (static display)
 *
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @example
 * ```tsx
 * // Static display
 * const { count, isLoading } = useAgentCount("acme");
 *
 * <ResourceCountCard
 *   icon={<BotIcon className="h-5 w-5" aria-hidden="true" />}
 *   label="Agents"
 *   count={count}
 *   isLoading={isLoading}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Navigable card with SPA routing
 * <ResourceCountCard
 *   icon={<BotIcon className="h-5 w-5" aria-hidden="true" />}
 *   label="Agents"
 *   count={agentCount}
 *   isLoading={isAgentLoading}
 *   href="/library/agents"
 *   onClick={(e) => {
 *     e.preventDefault();
 *     router.push("/library/agents");
 *   }}
 * />
 * ```
 *
 * @see {@link useAgentCount} — data hook for agent count
 * @see {@link useSkillCount} — data hook for skill count
 * @see {@link useMcpServerCount} — data hook for MCP server count
 */
export function ResourceCountCard({ icon, label, count, isLoading = false, href, onClick, className, }) {
    const isInteractive = !!href || !!onClick;
    const showSkeleton = isLoading && count === undefined;
    const rootClasses = cn("flex flex-col rounded-lg border border-border bg-card p-4 text-left no-underline", isInteractive && [
        "cursor-pointer transition-colors hover:bg-accent-hover",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
    ], className);
    const content = (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground", children: icon }), showSkeleton ? (_jsx("div", { className: "mt-3 h-7 w-12 animate-pulse rounded bg-muted", "aria-hidden": "true" })) : (_jsx("div", { className: "mt-3 text-2xl font-semibold tabular-nums text-foreground", children: count !== undefined ? count.toLocaleString() : "\u2014" })), _jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: label })] }));
    if (href) {
        return (_jsx("a", { href: href, onClick: onClick, "aria-label": buildAriaLabel(label, count, isLoading), className: rootClasses, children: content }));
    }
    if (onClick) {
        return (_jsx("button", { type: "button", onClick: onClick, "aria-label": buildAriaLabel(label, count, isLoading), className: rootClasses, children: content }));
    }
    return _jsx("div", { className: rootClasses, children: content });
}
// ---------------------------------------------------------------------------
// Utilities
// ---------------------------------------------------------------------------
function buildAriaLabel(label, count, isLoading) {
    if (count !== undefined)
        return `${label}: ${count.toLocaleString()}`;
    if (isLoading)
        return `${label}: loading`;
    return label;
}
//# sourceMappingURL=ResourceCountCard.js.map