"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { useEmptyState } from "./useEmptyState.js";
/**
 * A semantic, accessible empty state component supporting four distinct
 * variants: first-use, zero-results, permission, and error.
 *
 * Each variant provides appropriate default icons, copy, and ARIA roles.
 * All defaults can be overridden via props. The `icon` prop accepts any
 * ReactNode for full visual customization.
 *
 * @example
 * ```tsx
 * <EmptyState
 *   variant="first-use"
 *   resourceLabel="agents"
 *   action={{ label: "Create agent", onClick: handleCreate }}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <EmptyState
 *   variant="error"
 *   errorMessage="Network request failed"
 *   action={{ label: "Retry", onClick: handleRetry }}
 * />
 * ```
 */
export function EmptyState({ variant, resourceLabel, icon, title, description, errorMessage, action, children, className, }) {
    const resolved = useEmptyState({
        variant,
        resourceLabel,
        title,
        description,
        errorMessage,
    });
    return (_jsxs("div", { role: resolved.role, className: cn("flex flex-col items-center gap-3 py-12 text-center", className), children: [_jsx("div", { className: "text-muted-foreground-faint", children: icon ?? resolved.defaultIcon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: resolved.title }), _jsx("p", { className: "max-w-sm text-xs text-muted-foreground-subtle", children: resolved.description })] }), children
                ? _jsx("div", { className: "mt-1", children: children })
                : action && (_jsx("button", { type: "button", onClick: action.onClick, className: cn("mt-1 inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium", variant === "error"
                        ? "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground"
                        : "bg-primary text-primary-foreground hover:bg-primary-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: action.label }))] }));
}
//# sourceMappingURL=EmptyState.js.map