'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function Initials({ initials, size = 'h-8 w-8 text-sm' }) {
    return (_jsx("span", { className: `bg-brand text-brand-foreground inline-flex shrink-0 items-center justify-center rounded-md font-medium ${size}`, "aria-hidden": "true", children: initials }));
}
/** Expanded sidebar lockup preview (primary → mark+title → initials). */
function SidebarPreview({ admin, dark }) {
    const logo = dark && admin.dark ? admin.dark : admin.primary;
    return (_jsx("div", { className: `flex h-14 items-center gap-2.5 rounded-md border px-3 ${dark ? 'border-border bg-foreground' : 'bg-sidebar border-sidebar-border'}`, children: logo ? (_jsx("img", { src: logo.url, alt: logo.alt, className: "h-8 w-auto object-contain" })) : admin.mark ? (_jsxs(_Fragment, { children: [_jsx("img", { src: admin.mark.url, alt: admin.mark.alt, className: "h-8 w-8 object-contain" }), _jsx("span", { className: dark ? 'text-background text-sm' : 'text-sidebar-foreground text-sm', children: admin.initials })] })) : (_jsxs(_Fragment, { children: [_jsx(Initials, { initials: admin.initials }), _jsx("span", { className: dark ? 'text-background text-sm' : 'text-sidebar-foreground text-sm', children: "Admin" })] })) }));
}
function PreviewTile({ label, children }) {
    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), children] }));
}
export function BrandPreviewCard({ s }) {
    const { admin, public: pub, faviconUrl } = s.preview;
    return (_jsxs("section", { className: "border-border bg-card rounded-lg border p-6", children: [_jsxs("header", { className: "mb-4 flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-foreground text-lg font-medium", children: "Brand preview" }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: "How your brand renders across the admin and public site." })] }), s.dirty && (_jsx("span", { className: "text-warning bg-warning/10 border-warning/30 rounded-md border px-2 py-0.5 text-xs", children: "Unsaved" }))] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: [_jsx(PreviewTile, { label: "Admin sidebar", children: _jsx(SidebarPreview, { admin: admin }) }), _jsx(PreviewTile, { label: "Collapsed sidebar", children: _jsx("div", { className: "bg-sidebar border-sidebar-border flex h-14 w-14 items-center justify-center rounded-md border", children: admin.mark ? (_jsx("img", { src: admin.mark.url, alt: admin.mark.alt, className: "h-8 w-8 object-contain" })) : (_jsx(Initials, { initials: admin.initials })) }) }), _jsx(PreviewTile, { label: "Dark mode", children: _jsx(SidebarPreview, { admin: admin, dark: true }) }), _jsx(PreviewTile, { label: "Public header", children: _jsx("div", { className: "border-border bg-background flex h-14 items-center gap-2.5 rounded-md border px-3", children: pub.primary ? (_jsx("img", { src: pub.primary.url, alt: pub.primary.alt, className: "h-8 w-auto object-contain" })) : pub.mark ? (_jsxs(_Fragment, { children: [_jsx("img", { src: pub.mark.url, alt: pub.mark.alt, className: "h-8 w-8 object-contain" }), _jsx("span", { className: "text-foreground text-sm", children: pub.initials })] })) : (_jsx("span", { className: "text-foreground text-sm font-medium", children: pub.initials })) }) }), _jsx(PreviewTile, { label: "Favicon", children: _jsx("div", { className: "border-border bg-muted flex h-14 w-14 items-center justify-center rounded-md border p-2", children: faviconUrl ? (_jsx("img", { src: faviconUrl, alt: "Favicon preview", className: "h-8 w-8 object-contain" })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "None" })) }) })] })] }));
}
//# sourceMappingURL=BrandPreviewCard.js.map