import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

// src/lib/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function CommerceProductDetail({
  name,
  price,
  media,
  eyebrow,
  description,
  options,
  actions,
  details,
  className
}) {
  return /* @__PURE__ */ jsx("section", { className: cn("bg-background py-12 sm:py-16", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-7xl gap-10 px-6 lg:grid-cols-2 lg:gap-16 lg:px-8", children: [
    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl bg-muted [&_img]:size-full [&_img]:object-cover", children: media }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
        eyebrow ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: eyebrow }) : null,
        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight text-foreground", children: name }),
        /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold tracking-tight text-foreground", children: price })
      ] }),
      description ? /* @__PURE__ */ jsx("p", { className: "text-pretty text-base text-muted-foreground", children: description }) : null,
      options ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: options }) : null,
      actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 sm:flex-row", children: actions }) : null,
      details ? /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-6", children: details }) : null
    ] })
  ] }) });
}

export { CommerceProductDetail };
//# sourceMappingURL=commerce-product-detail.js.map
//# sourceMappingURL=commerce-product-detail.js.map