'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { X } from 'lucide-react';
import { InspectorExpandButton, ResizableAside } from '../../components/ui/ResizableAside.js';
import { Toggle } from '../../components/ui/Toggle.js';
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(ResizableAside, { role: "dialog", "aria-label": "Edit post header", className: "bg-card border-border flex h-full flex-col border-l", children: [_jsxs("div", { className: "border-border flex items-center justify-between border-b px-6 py-4", 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" })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [_jsx(InspectorExpandButton, {}), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close header panel", className: "text-muted-foreground hover:text-foreground hover:bg-accent flex h-9 w-9 items-center justify-center rounded-md md:h-7 md:w-7", 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-medium 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-medium tracking-wider uppercase", children: "Show in header" }), TOGGLES.map((t) => {
                                const value = header[t.key] === true;
                                return (_jsxs("div", { className: "border-border text-foreground flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm", children: [_jsx("span", { children: t.label }), _jsx(Toggle, { checked: value, disabled: !canEdit, onCheckedChange: (v) => onChange({ [t.key]: v }), "aria-label": t.label })] }, t.key));
                            })] })] })] }));
}
//# sourceMappingURL=PostHeaderPanel.js.map