"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@12.1.2/node_modules/swiper/swiper-react.mjs';
import Pagination from '../../node_modules/.pnpm/swiper@12.1.2/node_modules/swiper/modules/pagination.mjs';
import Image from 'next/image';
import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';

const swiperThemeStyle = {
    "--gallery-swiper-bullet-active-color": themeSvgIconColor,
    "--swiper-theme-color": themeSvgIconColor,
};
function GalleryMobileSwiper({ items }) {
    return (jsx("div", { className: "block sm:hidden px-4", children: jsx("div", { className: "w-full overflow-hidden", style: { maxWidth: "min(calc(100vw - 48px), 350px)", margin: "0 auto" }, children: jsx(Swiper, { modules: [Pagination], pagination: { clickable: true }, spaceBetween: 12, slidesPerView: 1, loop: true, grabCursor: true, className: "gallery-mobile-swiper rounded-2xl", style: swiperThemeStyle, children: items.map((item) => (jsx(SwiperSlide, { children: jsxs("div", { className: "relative w-full pb-[100%] bg-gray-100", children: [jsx(Image, { src: item.url, alt: item.altMsg, fill: true, sizes: "(max-width: 600px) min(100vw-48px, 350px)", className: "object-cover", "data-gallery-image": item.id }), jsx("button", { className: "absolute bottom-4 right-4 p-3 rounded-full bg-black/60 hover:bg-black/80 text-white transition-all z-10", "data-gallery-download": item.id, "aria-label": `Download ${item.altMsg}`, children: jsx("svg", { className: "h-5 w-5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) })] }) }, item.id))) }) }) }));
}

export { GalleryMobileSwiper };
