import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import IconFont from "../iconfont/index.js";
import React, { useEffect, useRef } from "react";
import { Image } from "antd";
import classNames from "classnames";
import { Autoplay, Navigation, Pagination as Pagination$1, Swiper } from "swiper";
import "swiper/swiper-bundle.css";
import "./index.less";
//#region src/components/pisellImageCarousels/index.tsx
const PisellImageCarousels = ({ dataSource = [], width = 640, height = 400, showArrows = true, showDots = true, autoplay = true, interval = 3e3, borderRadius = 8, loop = true, className, style }) => {
	const swiperRef = useRef(null);
	const swiperInstance = useRef(null);
	useEffect(() => {
		if (swiperRef.current) swiperInstance.current = new Swiper(swiperRef.current, {
			modules: [
				Navigation,
				Pagination$1,
				Autoplay
			],
			slidesPerView: 1,
			spaceBetween: 0,
			loop,
			navigation: showArrows ? {
				nextEl: ".pisell-carousel-next",
				prevEl: ".pisell-carousel-prev"
			} : false,
			pagination: showDots ? {
				el: ".pisell-carousel-pagination",
				clickable: true
			} : false,
			autoplay: autoplay ? {
				delay: interval,
				disableOnInteraction: false
			} : false
		});
		return () => {
			if (swiperInstance.current) swiperInstance.current.destroy();
		};
	}, [
		showArrows,
		showDots,
		autoplay,
		interval,
		loop
	]);
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-image-carousel", className),
		style: _objectSpread2({
			width,
			height
		}, style)
	}, /* @__PURE__ */ React.createElement("div", {
		className: "swiper",
		ref: swiperRef
	}, /* @__PURE__ */ React.createElement("div", { className: "swiper-wrapper" }, dataSource === null || dataSource === void 0 ? void 0 : dataSource.map((item, index) => /* @__PURE__ */ React.createElement("div", {
		key: index,
		className: "swiper-slide"
	}, /* @__PURE__ */ React.createElement(Image, {
		preview: false,
		src: item,
		width,
		height,
		loading: "lazy",
		style: { borderRadius: `${borderRadius}px` }
	})))), showArrows && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "pisell-carousel-prev" }, /* @__PURE__ */ React.createElement("span", { className: "carousel-arrow" }, /* @__PURE__ */ React.createElement(IconFont, { type: "pisell2-chevron-left" }))), /* @__PURE__ */ React.createElement("div", { className: "pisell-carousel-next" }, /* @__PURE__ */ React.createElement("span", { className: "carousel-arrow" }, /* @__PURE__ */ React.createElement(IconFont, { type: "pisell2-chevron-right" })))), showDots && /* @__PURE__ */ React.createElement("div", { className: "pisell-carousel-pagination" })));
};
//#endregion
export { PisellImageCarousels as default };
