'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { X } from 'lucide-react';
const LABEL = 'text-foreground mb-1 block text-xs font-medium';
const INPUT = 'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none';
const TOGGLES = [
    { key: 'showFeaturedImage', label: 'Featured image' },
    { key: 'showExcerpt', label: 'Excerpt' },
    { key: 'showAuthor', label: 'Author' },
    { key: 'showDate', label: 'Date' },
    { key: 'showCategory', label: 'Category' },
    { key: 'showReadingTime', label: 'Reading time' },
];
/** Inspector panel for the post header layout (template-level design config). */
export function PostHeaderPanel({ header, canEdit, onClose, onChange }) {
    return (_jsxs("aside", { role: "dialog", "aria-label": "Edit post header", className: "bg-card border-border flex h-full w-80 shrink-0 flex-col border-l", children: [_jsxs("div", { className: "border-border flex items-center justify-between border-b px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-foreground truncate text-sm font-medium", children: "Post header" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Layout for every post of this type" })] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close header panel", className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1", children: _jsx(X, { className: "h-4 w-4", "aria-hidden": true }) })] }), _jsxs("div", { className: "flex-1 space-y-6 overflow-y-auto p-4", children: [_jsxs("fieldset", { disabled: !canEdit, className: "space-y-3", children: [_jsx("legend", { className: "text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase", children: "Layout" }), _jsxs("div", { children: [_jsx("label", { className: LABEL, htmlFor: "ph-layout", children: "Header style" }), _jsxs("select", { id: "ph-layout", className: INPUT, value: header.layout, onChange: (e) => onChange({ layout: e.target.value }), children: [_jsx("option", { value: "centered", children: "Centered" }), _jsx("option", { value: "left", children: "Left-aligned" }), _jsx("option", { value: "overlay", children: "Image overlay" })] })] })] }), _jsxs("fieldset", { disabled: !canEdit, className: "space-y-2", children: [_jsx("legend", { className: "text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase", children: "Show in header" }), TOGGLES.map((t) => {
                                const value = header[t.key] === true;
                                return (_jsxs("button", { type: "button", role: "switch", "aria-checked": value, disabled: !canEdit, onClick: () => onChange({ [t.key]: !value }), className: "border-border text-foreground hover:bg-accent flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm disabled:opacity-50", children: [_jsx("span", { children: t.label }), _jsx("span", { "aria-hidden": true, className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${value ? 'bg-primary' : 'bg-muted'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${value ? 'translate-x-4' : 'translate-x-0.5'}` }) })] }, t.key));
                            })] })] })] }));
}
//# sourceMappingURL=PostHeaderPanel.js.map