import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ImageIcon } from 'lucide-react';
import { PreviewButton, str } from './parts.js';
export function FeatureHighlightSection({ section }) {
    const c = section.content;
    const label = str(c, 'label');
    const heading = str(c, 'heading');
    const body = str(c, 'body');
    const imageUrl = str(c, 'imageUrl');
    const imageAlt = str(c, 'imageAlt');
    const imageLeft = str(c, 'imagePosition', 'right') === 'left';
    const text = (_jsxs("div", { className: "flex-1", children: [label && (_jsx("span", { className: "mb-3 inline-block rounded bg-violet-600 px-2 py-0.5 text-xs font-medium text-white", children: label })), _jsx("h2", { className: "text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl", children: heading }), body && _jsx("p", { className: "mt-4 text-base leading-relaxed text-zinc-600", children: body }), _jsx("div", { className: "mt-6", children: _jsx(PreviewButton, { label: str(c, 'buttonLabel'), href: str(c, 'buttonUrl'), tone: "primary" }) })] }));
    const media = (_jsx("div", { className: "flex-1", children: imageUrl ? (
        // Admin-only preview; next/image isn't in scope here.
        _jsx("img", { src: imageUrl, alt: imageAlt, className: "aspect-[4/3] w-full rounded-xl object-cover" })) : (_jsx("div", { className: "flex aspect-[4/3] w-full items-center justify-center rounded-xl bg-violet-50", children: _jsx(ImageIcon, { className: "h-10 w-10 text-violet-300", "aria-hidden": true }) })) }));
    return (_jsx("div", { className: "mx-auto max-w-5xl px-6", children: _jsx("div", { className: "flex flex-col items-center gap-10 md:flex-row", children: imageLeft ? (_jsxs(_Fragment, { children: [media, text] })) : (_jsxs(_Fragment, { children: [text, media] })) }) }));
}
//# sourceMappingURL=FeatureHighlightSection.js.map