import { jsx as e, jsxs as r } from "react/jsx-runtime";
import a from "../../modules/ProgramsDetailsHero/programsDetailsHero.module.css";
import { EAnalyticsEventType as c, EAnalyticsEvent as d } from "../../types/analytics/analytics.es.js";
import { Typography as t } from "../../components/Typography/Typography.es.js";
import { Button as m } from "../../components/Button/Button.es.js";
const N = ({ title: n, description: s, button: i, backgroundImage: l }) => {
  const o = {
    event: d.ctaClicked,
    type: c.interaction,
    component: "ProgramsDetailsHero",
    payload: {
      ctaLink: i.link,
      ctaLabel: i.text
    }
  };
  return /* @__PURE__ */ e("section", { className: a.root, "data-type": "hero", style: { backgroundImage: `url(${l})` }, children: /* @__PURE__ */ e("div", { className: a.container, children: /* @__PURE__ */ r("div", { className: a.headline, children: [
    /* @__PURE__ */ e("div", { className: a.titleContainer, children: /* @__PURE__ */ e(
      t,
      {
        className: a.title,
        as: "h2",
        defaultVariant: "displayMd",
        mobileVariant: "headingXl",
        children: n
      }
    ) }),
    /* @__PURE__ */ e("div", { className: a.midBorder }),
    /* @__PURE__ */ e("div", { className: a.infoContainer, children: /* @__PURE__ */ r("div", { className: a.infoBox, children: [
      /* @__PURE__ */ e(
        t,
        {
          className: a.description,
          as: "p",
          defaultVariant: "bodyMd",
          mobileVariant: "bodySm",
          children: s
        }
      ),
      /* @__PURE__ */ e(m, { as: "a", href: i.link, variant: "secondary", size: "md", analyticsProps: o, children: i.text })
    ] }) })
  ] }) }) });
};
export {
  N as ProgramsDetailsHero
};
