"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
/**
 * Empty state shown in the Instances tab when no user-created instances exist.
 *
 * Communicates the value proposition of workflow instances without
 * mentioning the platform-managed default instance (implementation detail).
 */
export function WorkflowInstanceEmptyState({ onCreateClick, className, }) {
    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center py-12 px-6 text-center", className), children: [_jsx("div", { className: "mb-4 rounded-full bg-muted p-3", children: _jsx(LayersIcon, {}) }), _jsx("h3", { className: "text-sm font-semibold text-foreground mb-1", children: "No instances yet" }), _jsx("p", { className: "text-sm text-muted-foreground max-w-sm mb-6", children: "Create instances to run this workflow with different configurations and access controls. Each instance binds environments (credentials, secrets, settings) and can be shared independently." }), onCreateClick && (_jsxs("button", { type: "button", onClick: onCreateClick, className: cn("inline-flex items-center gap-1.5 rounded-md px-3 py-1.5", "text-sm font-medium", "bg-primary text-primary-foreground", "hover:bg-primary/90", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"), children: [_jsx(PlusIcon, {}), "Create Instance"] }))] }));
}
function LayersIcon() {
    return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M10 2L2 6l8 4 8-4-8-4zM2 10l8 4 8-4M2 14l8 4 8-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "text-muted-foreground" }) }));
}
function PlusIcon() {
    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M7 2v10M2 7h10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
}
//# sourceMappingURL=WorkflowInstanceEmptyState.js.map