"use client";
import { jsx as r } from "react/jsx-runtime";
import { useState as c, useEffect as m } from "react";
import { ProtocolCard as d } from "./cards/Protocol.es.js";
import { AgeCard as f } from "./cards/Age.es.js";
import { BiomarkerCard as p } from "./cards/Biomarker.es.js";
import { FacetimeCard as u } from "./cards/Facetime.es.js";
import e from "../../../../pageComponents/HomepageHero/components/MiddleCarousel/middleCarousel.module.css";
const C = [
  /* @__PURE__ */ r(d, {}, "protocol"),
  /* @__PURE__ */ r(f, {}, "age"),
  /* @__PURE__ */ r(p, {}, "biomarker"),
  /* @__PURE__ */ r(u, {}, "facetime")
];
function $() {
  const [n, l] = c(0), t = 4;
  return m(() => {
    const s = setInterval(() => {
      l((i) => (i + 1) % t);
    }, 2500);
    return () => clearInterval(s);
  }, [t]), /* @__PURE__ */ r("div", { className: e.carousel, children: C.map((s, i) => {
    let o = (i - n + t) % t;
    o === t - 1 && (o = -1);
    let a;
    return o === -1 ? a = e.left : o === 0 ? a = e.center : o === 1 ? a = e.right : a = e.hidden, /* @__PURE__ */ r("div", { className: `${e.card} ${a}`, children: /* @__PURE__ */ r("div", { className: e.cardContent, children: s }) }, i);
  }) });
}
export {
  $ as MiddleCarousel
};
