"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
/**
 * Shared section layout for resource detail views.
 *
 * Renders a labeled section with an optional count badge and edit affordance
 * in the header row. The content is wrapped in a bordered card.
 *
 * Used uniformly by AgentDetailView, McpServerDetailView, and SkillDetailView.
 */
export function Section({ title, count, headerActions, onEdit, children, className, }) {
    return (_jsxs("section", { className: className, children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("h3", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }), count != null && count > 0 && (_jsx("span", { className: "inline-flex size-5 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground", children: count })), (headerActions || onEdit) && (_jsxs("div", { className: "ml-auto flex items-center gap-1", children: [headerActions, onEdit && (_jsx("button", { type: "button", onClick: onEdit, "aria-label": `Edit ${title.toLowerCase()}`, className: cn("inline-flex size-6 items-center justify-center rounded-md text-muted-foreground", "hover:bg-accent-hover hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "transition-colors"), children: _jsx(PencilIcon, { className: "size-3.5" }) }))] }))] }), _jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: children })] }));
}
function PencilIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M11.5 1.5a2.121 2.121 0 0 1 3 3L5 14l-4 1 1-4Z" }) }));
}
//# sourceMappingURL=Section.js.map