import { jsxs as t, jsx as a } from "react/jsx-runtime";
import { cn as o } from "../../utils/cn/cn.es.js";
import i from "../../components/Pricing/pricing.module.css";
import { EAnalyticsEventType as b, EAnalyticsEvent as T } from "../../types/analytics/analytics.es.js";
import { Label as l } from "../Label/Label.es.js";
import { Typography as m } from "../Typography/Typography.es.js";
import { BenefitItem as E } from "./components/BenefitItem/BenefitItem.es.js";
import { Button as p } from "../Button/Button.es.js";
const D = ({ label: e, price: d, items: g, link: r, button: n, zenpatientId: h, element: f }) => {
  const c = {
    event: T.ctaClicked,
    type: b.interaction,
    component: "Pricing",
    element: f,
    payload: {
      ctaLabel: "GET STARTED",
      ctaLink: r,
      productId: h
    }
  };
  return /* @__PURE__ */ t("div", { className: i.root, children: [
    /* @__PURE__ */ a(l, { size: "lg", color: e.color, className: o(i.pricingLabel, i.pricingLabelDesktop), children: e.label }),
    /* @__PURE__ */ a(l, { size: "sm", color: e.color, className: o(i.pricingLabel, i.pricingLabelMobile), children: e.label }),
    /* @__PURE__ */ t("p", { className: i.pricing, children: [
      /* @__PURE__ */ a(
        m,
        {
          as: "span",
          defaultVariant: "displayMd",
          mobileVariant: "displaySm",
          className: i.pricingTextPrimary,
          children: `$${d}`
        }
      ),
      /* @__PURE__ */ a(
        m,
        {
          as: "span",
          defaultVariant: "headingSm",
          mobileVariant: "headingXs",
          className: i.pricingTextSecondary,
          children: "/ mo"
        }
      )
    ] }),
    /* @__PURE__ */ a("div", { className: i.benefits, children: g.map((s, y) => /* @__PURE__ */ a(E, { badge: s.badge, label: s.label }, y)) }),
    /* @__PURE__ */ a("div", { className: i.pricingButtonContainerDesktop, children: /* @__PURE__ */ a(p, { ...n, size: "lg", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
    /* @__PURE__ */ a("div", { className: i.pricingButtonContainerMobile, children: /* @__PURE__ */ a(p, { ...n, size: "md", as: "a", href: r, analyticsProps: c, children: "GET STARTED" }) }),
    /* @__PURE__ */ a("div", { className: i.leftBorder }),
    /* @__PURE__ */ a("div", { className: i.rightBorder })
  ] });
};
export {
  D as Pricing
};
