"use client";
import { jsx as e, jsxs as v } from "react/jsx-runtime";
import { useRef as N, useEffect as R, useMemo as k } from "react";
import { Swiper as g, SwiperSlide as y } from "swiper/react";
/* empty css                                                                             */
import { useSwiper as C } from "../../../../utils/useSwiper/useSwiper.es.js";
import i from "../../../../modules/Reviews/components/ReviewList/reviewList.module.css";
import { Skeleton as o } from "../../../../components/Skeleton/Skeleton.es.js";
import { ReviewCard as T } from "../ReviewCard/ReviewCard.es.js";
const A = ({ reviews: d, page: r, pagesCount: n, isLoading: h, onPageChange: p }) => {
  const s = N("external"), { activeIndex: a, onSwiperInit: f, handleSlideTo: m, handleSlideChange: w, handleSwiperResize: S } = C();
  R(() => {
    s.current === "external" && a !== r - 1 && m(r - 1), s.current = "external";
  }, [a, r, m]);
  const u = k(() => Array.from({ length: n }), [n]);
  return /* @__PURE__ */ e(
    g,
    {
      onSwiper: f,
      onResize: S,
      onSlideChange: (l) => {
        const t = l.activeIndex + 1;
        t !== r && (s.current = "swiper", p(t)), w(l);
      },
      slidesPerView: 1,
      allowTouchMove: n > 1,
      spaceBetween: 0,
      initialSlide: r - 1,
      className: i.swiper,
      children: u.map((l, t) => /* @__PURE__ */ e(y, { children: t === r - 1 ? /* @__PURE__ */ e("div", { className: i.reviewsContainer, children: h ? /* @__PURE__ */ v("div", { className: i.loadingContainer, children: [
        /* @__PURE__ */ e(o, { height: "130px", className: i.skeleton }),
        /* @__PURE__ */ e(o, { height: "110px", className: i.skeleton }),
        /* @__PURE__ */ e(o, { height: "90px", className: i.skeleton })
      ] }) : d.map(({ review: c }, x) => /* @__PURE__ */ e(T, { review: c }, `${c.author}_${x}`)) }) : null }, t))
    }
  );
};
export {
  A as ReviewList
};
