"use client";
import { jsx as i, jsxs as t, Fragment as V } from "react/jsx-runtime";
import { Navigation as u } from "swiper/modules";
import { Swiper as P, SwiperSlide as R } from "swiper/react";
import { useSwiper as x } from "../../utils/useSwiper/useSwiper.es.js";
import n from "../../modules/Highlight/highlight.module.css";
/* empty css                                                                       */
/* empty css                                                                                   */
import { Typography as c } from "../../components/Typography/Typography.es.js";
import { HighlightCard as m } from "../../components/HighlightCard/HighlightCard.es.js";
import { ProgressButton as E } from "../../components/ProgressButton/ProgressButton.es.js";
const B = [u], T = ({ title: l, subtitle: r, highlightCards: o }) => {
  const d = x(), a = o.length === 3, h = o.length > 3, {
    isEnd: p,
    isBeginning: g,
    hideNav: w,
    handleSlideChange: S,
    handlePrevClick: N,
    handleNextClick: f,
    onSwiperInit: v,
    handleSwiperResize: y,
    handleReachEnd: b,
    handleReachBeginning: k
  } = d;
  return /* @__PURE__ */ i("section", { className: n.root, children: /* @__PURE__ */ t("div", { className: n.container, children: [
    (l || r) && /* @__PURE__ */ t("div", { className: n.textContent, children: [
      l && /* @__PURE__ */ i(
        c,
        {
          as: "h2",
          defaultVariant: "displayMd",
          mobileVariant: "headingLg",
          className: n.title,
          children: l
        }
      ),
      r && /* @__PURE__ */ i(
        c,
        {
          as: "p",
          defaultVariant: "bodyLg",
          mobileVariant: "bodyMd",
          className: n.subtitle,
          children: r
        }
      )
    ] }),
    a && /* @__PURE__ */ i("div", { className: n.cardGrid, children: o.map((e, s) => /* @__PURE__ */ i("div", { className: n.cardGridItem, children: /* @__PURE__ */ i(
      m,
      {
        image: e.image,
        eyebrow: e.eyebrow,
        title: e.title,
        description: e.description,
        link: e.link,
        colorScheme: e.colorScheme
      }
    ) }, `${e.title}_${s}`)) }),
    !a && /* @__PURE__ */ t(V, { children: [
      /* @__PURE__ */ i("div", { className: n.carouselArea, children: /* @__PURE__ */ i(
        P,
        {
          onSwiper: v,
          onResize: y,
          onSlideChange: S,
          onReachEnd: b,
          onReachBeginning: k,
          modules: B,
          spaceBetween: 16,
          slidesPerView: 3,
          breakpoints: {
            0: {
              slidesPerView: 1
            },
            769: {
              slidesPerView: 2
            },
            1201: {
              slidesPerView: 3
            }
          },
          className: n.swiper,
          children: o.map((e, s) => /* @__PURE__ */ i(R, { className: n.swiperSlide, children: /* @__PURE__ */ i(
            m,
            {
              image: e.image,
              eyebrow: e.eyebrow,
              title: e.title,
              description: e.description,
              link: e.link,
              colorScheme: e.colorScheme
            }
          ) }, `${e.title}_${s}`))
        }
      ) }),
      h && !w && /* @__PURE__ */ i("div", { className: n.navigation, children: /* @__PURE__ */ i(
        E,
        {
          left: {
            disabled: g,
            onClick: N
          },
          right: {
            disabled: p,
            onClick: f
          }
        }
      ) })
    ] })
  ] }) });
};
export {
  T as Highlight
};
