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

// src/lib/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function CommerceQuickview({
  name,
  price,
  media,
  eyebrow,
  description,
  options,
  actions,
  detailsLink,
  className
}) {
  return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-6 sm:grid-cols-2 sm:gap-8", className), children: [
    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl bg-muted [&_img]:size-full [&_img]:object-cover", children: media }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", 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("h2", { className: "text-xl font-semibold tracking-tight text-foreground", children: name }),
        /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-foreground", children: price })
      ] }),
      description ? /* @__PURE__ */ jsx("p", { className: "text-pretty text-sm 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-2", children: actions }) : null,
      detailsLink ? /* @__PURE__ */ jsx("div", { className: "mt-auto text-sm", children: detailsLink }) : null
    ] })
  ] });
}

export { CommerceQuickview };
//# sourceMappingURL=commerce-quickview.js.map
//# sourceMappingURL=commerce-quickview.js.map