"use client";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { cn } from "@stigmer/theme";
import { ActionMenu } from "../action-menu/index.js";
/**
 * Horizontal action bar for resource detail page headers.
 *
 * Renders an optional primary action as a visible button and any
 * remaining actions in a kebab overflow menu (using the SDK's
 * {@link ActionMenu} compound component).
 *
 * When there are no actions at all, renders nothing.
 *
 * @example
 * ```tsx
 * <ResourceActionBar
 *   primaryAction={{
 *     id: "edit",
 *     label: "Edit",
 *     icon: <PencilIcon />,
 *     onAction: () => router.push(editUrl),
 *   }}
 *   actions={[
 *     { id: "copy-id", label: "Copy ID", onAction: () => copyId(id) },
 *     { id: "delete", label: "Delete", variant: "destructive", onAction: handleDelete },
 *   ]}
 * />
 * ```
 */
export function ResourceActionBar({ primaryAction, actions, className, }) {
    const hasOverflow = actions != null && actions.length > 0;
    if (!primaryAction && !hasOverflow)
        return null;
    return (_jsxs("div", { className: cn("flex items-center gap-2", className), children: [primaryAction && (_jsxs("button", { type: "button", onClick: primaryAction.onAction, disabled: primaryAction.disabled, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "bg-primary text-primary-foreground hover:bg-primary-hover", "disabled:pointer-events-none disabled:opacity-50"), children: [primaryAction.icon, primaryAction.label] })), hasOverflow && _jsx(OverflowMenu, { actions: actions })] }));
}
// ---------------------------------------------------------------------------
// Overflow kebab menu
// ---------------------------------------------------------------------------
function OverflowMenu({ actions, }) {
    const grouped = useGroupedActions(actions);
    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Trigger, { "aria-label": "More actions", children: _jsx(KebabIcon, { className: "size-4" }) }), _jsx(ActionMenu.Content, { children: grouped.map((group, groupIndex) => (_jsxs(ActionMenu.Group, { children: [groupIndex > 0 && _jsx(ActionMenu.Separator, {}), group.items.map((action) => (_jsx(ActionMenu.Item, { icon: action.icon, shortcut: action.shortcut, variant: action.variant, disabled: action.disabled, onSelect: action.onAction, children: action.label }, action.id)))] }, group.key))) })] }));
}
function useGroupedActions(actions) {
    return useMemo(() => {
        const map = new Map();
        for (const action of actions) {
            const key = action.group ?? "__default";
            const list = map.get(key);
            if (list)
                list.push(action);
            else
                map.set(key, [action]);
        }
        return Array.from(map.entries()).map(([key, items]) => ({ key, items }));
    }, [actions]);
}
// ---------------------------------------------------------------------------
// Kebab icon (inline SVG — no icon library dependency)
// ---------------------------------------------------------------------------
function KebabIcon({ className }) {
    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "3", r: "1.25" }), _jsx("circle", { cx: "8", cy: "8", r: "1.25" }), _jsx("circle", { cx: "8", cy: "13", r: "1.25" })] }));
}
//# sourceMappingURL=ResourceActionBar.js.map