'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ACCENT_PRESET_LIST } from '@actuate-media/cms-core/appearance';
import { Check, Monitor, Moon, Sun } from 'lucide-react';
import { SettingsSourceBadge } from './components.js';
const COLOR_MODES = [
    { value: 'light', label: 'Light', Icon: Sun },
    { value: 'dark', label: 'Dark', Icon: Moon },
    { value: 'system', label: 'System', Icon: Monitor },
];
const DENSITIES = [
    { value: 'default', label: 'Default' },
    { value: 'compact', label: 'Compact' },
];
function SegmentedGroup({ label, value, options, canEdit, onChange, }) {
    return (_jsx("div", { role: "radiogroup", "aria-label": label, className: "border-border bg-muted inline-flex flex-wrap rounded-md border p-0.5", children: options.map(({ value: v, label: text, Icon }) => {
            const active = value === v;
            return (_jsxs("button", { type: "button", role: "radio", "aria-checked": active, disabled: !canEdit, onClick: () => onChange(v), className: `inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${active
                    ? 'bg-card text-foreground shadow-sm'
                    : 'text-muted-foreground hover:text-foreground'}`, children: [Icon && _jsx(Icon, { size: 14, "aria-hidden": "true" }), text] }, v));
        }) }));
}
export function AdminThemeCard({ s, canEdit }) {
    return (_jsxs("section", { className: "border-border bg-card rounded-lg border p-6", children: [_jsxs("header", { className: "mb-4", children: [_jsx("h3", { className: "text-foreground text-lg font-medium", children: "Admin theme" }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: "Controls the default look of the admin. Individual users can override the color mode." })] }), _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: "text-foreground text-base font-medium", children: "Color mode" }), _jsx(SettingsSourceBadge, { meta: s.sources.colorMode })] }), _jsx(SegmentedGroup, { label: "Color mode", value: s.appearance.colorMode, options: COLOR_MODES, canEdit: canEdit, onChange: s.setColorMode })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: "text-foreground text-base font-medium", children: "Accent color" }), _jsx(SettingsSourceBadge, { meta: s.sources.accent })] }), _jsxs("div", { role: "radiogroup", "aria-label": "Accent color", className: "flex flex-wrap items-center gap-3", children: [ACCENT_PRESET_LIST.map((preset) => {
                                        const active = s.appearance.accent === preset.name;
                                        const editable = s.sources.accent?.editable !== false;
                                        return (_jsx("button", { type: "button", role: "radio", "aria-checked": active, "aria-label": preset.label, title: preset.label, disabled: !canEdit || !editable, onClick: () => s.setAccent(preset.name), className: `focus-visible:ring-ring relative flex h-9 w-9 items-center justify-center rounded-full transition-transform focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${active ? 'ring-foreground ring-2 ring-offset-2' : ''}`, style: { backgroundColor: preset.swatch }, children: active && _jsx(Check, { size: 16, className: "text-white", "aria-hidden": "true" }) }, preset.name));
                                    }), _jsx("span", { className: "text-muted-foreground text-sm", children: ACCENT_PRESET_LIST.find((p) => p.name === s.appearance.accent)?.label ??
                                            s.appearance.accent })] })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-2 flex items-center gap-2", children: _jsx("span", { className: "text-foreground text-base font-medium", children: "Sidebar density" }) }), _jsx(SegmentedGroup, { label: "Sidebar density", value: s.appearance.density, options: DENSITIES, canEdit: canEdit, onChange: s.setDensity })] })] })] }));
}
//# sourceMappingURL=AdminThemeCard.js.map