"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { PROVIDER_PRESETS } from "./presets";
/**
 * Grid of well-known identity provider cards for the first step of
 * the creation wizard.
 *
 * Each card shows an icon, provider name, and short description.
 * Clicking a card fires {@link ProviderPickerProps.onSelect} with
 * the corresponding {@link ProviderPreset}.
 *
 * The "Custom OIDC" card is visually distinct (dashed border) to
 * signal that it triggers a different flow (OIDC Discovery).
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <ProviderPicker onSelect={(preset) => setSelectedPreset(preset)} />
 * ```
 */
export function ProviderPicker({ onSelect, className }) {
    return (_jsx("div", { className: cn("grid grid-cols-2 gap-2 sm:grid-cols-3", className), role: "listbox", "aria-label": "Choose an identity provider", children: PROVIDER_PRESETS.map((preset) => (_jsxs("button", { type: "button", role: "option", "aria-selected": false, onClick: () => onSelect(preset), className: cn("flex flex-col items-start gap-2 rounded-lg px-3 py-3 text-left transition-colors", "border hover:border-primary/60 hover:bg-accent-hover", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", preset.id === "custom"
                ? "border-dashed border-border"
                : "border-border-muted"), children: [_jsx(ProviderIcon, { presetId: preset.id }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block text-sm font-medium text-foreground", children: preset.label }), _jsx("span", { className: "block text-[0.65rem] leading-tight text-muted-foreground", children: preset.description })] })] }, preset.id))) }));
}
// ---------------------------------------------------------------------------
// Provider icons — simple thematic SVGs, one per preset
// ---------------------------------------------------------------------------
function ProviderIcon({ presetId }) {
    const Icon = ICON_MAP[presetId] ?? DefaultIcon;
    return (_jsx("span", { className: "flex size-8 items-center justify-center rounded-lg bg-muted", children: _jsx(Icon, {}) }));
}
const ICON_MAP = {
    auth0: LockIcon,
    okta: KeyIcon,
    google: GlobeIcon,
    "azure-ad": CloudIcon,
    "aws-cognito": UsersIcon,
    custom: CodeIcon,
};
function LockIcon() {
    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "text-muted-foreground", children: [_jsx("rect", { x: "3.5", y: "7", width: "9", height: "7", rx: "1.5" }), _jsx("path", { d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2" })] }));
}
function KeyIcon() {
    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "text-muted-foreground", children: [_jsx("circle", { cx: "5.5", cy: "10", r: "3" }), _jsx("path", { d: "M8 8l5.5-5.5M11 5l2-0.5L13.5 2.5" })] }));
}
function GlobeIcon() {
    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "text-muted-foreground", children: [_jsx("circle", { cx: "8", cy: "8", r: "6" }), _jsx("path", { d: "M2 8h12M8 2c2 2 2.5 4 2.5 6S10 14 8 14c-2-2-2.5-4-2.5-6S6 2 8 2z" })] }));
}
function CloudIcon() {
    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "text-muted-foreground", children: _jsx("path", { d: "M4 12.5h8.5a3 3 0 0 0 0-6 .5.5 0 0 1-.5-.4A4.5 4.5 0 0 0 3.5 8v.5a3 3 0 0 0 .5 6z" }) }));
}
function UsersIcon() {
    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "text-muted-foreground", children: [_jsx("circle", { cx: "6", cy: "5", r: "2.5" }), _jsx("path", { d: "M1.5 14c0-2.5 2-4.5 4.5-4.5S10.5 11.5 10.5 14" }), _jsx("circle", { cx: "11.5", cy: "5.5", r: "1.5" }), _jsx("path", { d: "M14.5 14c0-1.5-1-3-2.5-3.5" })] }));
}
function CodeIcon() {
    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "text-muted-foreground", children: _jsx("path", { d: "M5 4.5L1.5 8 5 11.5M11 4.5l3.5 3.5-3.5 3.5M9 2.5l-2 11" }) }));
}
function DefaultIcon() {
    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "text-muted-foreground", children: _jsx("circle", { cx: "8", cy: "8", r: "6" }) }));
}
//# sourceMappingURL=ProviderPicker.js.map