import { cn } from "./cva.js";
import { Radio, RadioGroup } from "./RadioGroup.js";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/PalettePicker.tsx
function PalettePicker({ value, onChange, options, className, ...aria }) {
	if (options.length === 0) return null;
	const selected = options.find((o) => o.id === value) ?? options[0];
	return /* @__PURE__ */ jsx("div", {
		className: cn("@container", className),
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-4 @md:flex-row @md:items-start",
			children: [/* @__PURE__ */ jsx(RadioGroup, {
				value,
				onValueChange: onChange,
				className: "flex flex-col gap-2",
				...aria,
				children: options.map((option) => /* @__PURE__ */ jsxs("label", {
					className: "flex cursor-pointer items-center gap-3 text-sm text-fg",
					children: [
						/* @__PURE__ */ jsx(Radio, {
							value: option.id,
							"aria-label": option.label
						}),
						/* @__PURE__ */ jsx("span", {
							className: "flex flex-row flex-wrap gap-1",
							"aria-hidden": true,
							children: option.swatches.map((color, i) => /* @__PURE__ */ jsx("span", {
								className: "h-4 w-4 shrink-0 rounded-full border border-border bg-[var(--swatch)]",
								style: { ["--swatch"]: color }
							}, i))
						}),
						/* @__PURE__ */ jsx("span", { children: option.label })
					]
				}, option.id))
			}), /* @__PURE__ */ jsxs("div", {
				"data-testid": "palette-preview",
				"aria-hidden": true,
				className: "flex w-full flex-col gap-2 rounded-md border bg-[var(--pp-bg)] p-4 text-[var(--pp-fg)] @md:flex-1 @md:min-w-0",
				style: {
					["--pp-bg"]: selected.preview.bg,
					["--pp-surface"]: selected.preview.surface,
					["--pp-fg"]: selected.preview.fg,
					["--pp-fg-muted"]: selected.preview.fgMuted,
					["--pp-accent"]: selected.preview.accent,
					["--pp-accent-fg"]: selected.preview.accentFg,
					["--pp-border"]: selected.preview.border,
					borderColor: "var(--pp-border)"
				},
				children: [
					/* @__PURE__ */ jsx("span", {
						className: "text-sm font-medium text-[var(--pp-fg)]",
						children: selected.label
					}),
					/* @__PURE__ */ jsx("span", {
						className: "text-xs text-[var(--pp-fg-muted)]",
						children: "The quick brown fox jumps over the lazy dog."
					}),
					/* @__PURE__ */ jsxs("span", {
						className: "flex flex-col items-start gap-2 rounded-sm bg-[var(--pp-surface)] p-2 text-xs text-[var(--pp-fg)]",
						children: ["Surface block", /* @__PURE__ */ jsx("span", {
							className: "inline-flex w-fit rounded-sm bg-[var(--pp-accent)] px-3 py-1 text-xs text-[var(--pp-accent-fg)]",
							children: "Primary action"
						})]
					})
				]
			})]
		})
	});
}
//#endregion
export { PalettePicker };
