"use client";
import { jsxs as r, jsx as a } from "react/jsx-runtime";
import { cn as s } from "../../../../utils/cn/cn.es.js";
import { formatUnits as c } from "../../../../utils/formatUnits/formatUnits.es.js";
import i from "../../../../modules/IndividualProductCard/components/PlanCard/planCard.module.css";
import { Label as m } from "../../../../components/Label/Label.es.js";
import { RadioButton as h } from "../../../../components/RadioButton/RadioButton.es.js";
import { Typography as t } from "../../../../components/Typography/Typography.es.js";
import { Icon as n } from "../../../../components/Icon/Icon.es.js";
import { EIconName as l } from "../../../../components/Icon/constants.es.js";
const C = ({ plan: e, isActive: o, onSelect: d }) => /* @__PURE__ */ r("button", { className: s(i.root, o && i.active), onClick: () => d(e.id), children: [
  e.featured && /* @__PURE__ */ a(m, { color: e.featuredLabelColor || "black", className: i.label, size: "sm", children: "Most popular" }),
  /* @__PURE__ */ r("div", { className: i.planContainer, children: [
    /* @__PURE__ */ r("div", { className: i.planInfo, children: [
      /* @__PURE__ */ a(h, { checked: o }),
      /* @__PURE__ */ r("div", { className: i.planDetails, children: [
        /* @__PURE__ */ a(t, { as: "h4", defaultVariant: "bodySm", emphasis: !0, align: "left", children: e.label }),
        !!e.savingsPercentage && /* @__PURE__ */ r(t, { as: "p", defaultVariant: "labelXs", weight: "regular", className: i.savings, children: [
          "Save ",
          e.savingsPercentage,
          "%"
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: i.priceDetails, children: [
      !!e.monthlyPrice && /* @__PURE__ */ r(t, { as: "p", defaultVariant: "bodySm", weight: "regular", className: i.description, children: [
        c(e.monthlyPrice, "usd", 0),
        "/mo"
      ] }),
      /* @__PURE__ */ r("div", { className: s(i.priceContainer), children: [
        e.price !== e.totalPrice && /* @__PURE__ */ a(t, { as: "p", defaultVariant: "labelXs", weight: "regular", className: i.totalPrice, children: c(e.price, "usd", 0) }),
        /* @__PURE__ */ a(
          t,
          {
            as: "p",
            defaultVariant: !e.monthlyPrice && e.price === e.totalPrice ? "bodySm" : "labelXs",
            className: s(i.price, {
              [i.description]: !e.monthlyPrice && e.price === e.totalPrice
            }),
            children: c(e.totalPrice, "usd", 0)
          }
        )
      ] })
    ] })
  ] }),
  !!e.duration && e.duration !== "one-time" && /* @__PURE__ */ a("div", { className: s(i.benefitsContainer, o && i.benefitsActive), children: /* @__PURE__ */ r("div", { className: i.benefitsContent, children: [
    /* @__PURE__ */ r("div", { className: i.benefit, children: [
      /* @__PURE__ */ a(n, { name: l.ARROW_RETURN, className: i.benefitIcon }),
      /* @__PURE__ */ r(t, { as: "p", defaultVariant: "bodyXs", children: [
        "Delivered every",
        " ",
        e.durationAmount && e.durationAmount > 1 ? `${e.durationAmount} months` : "month"
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: i.benefit, children: [
      /* @__PURE__ */ a(n, { name: l.CALENDAR, className: i.benefitIcon }),
      /* @__PURE__ */ a(t, { as: "p", defaultVariant: "bodyXs", children: "Modify or cancel anytime" })
    ] })
  ] }) })
] });
export {
  C as PlanCard
};
