"use client";
import { ImageSliderBlock as ImageSliderBlockType } from "@/gql/graphql";
import { ImageFigure } from "@/components/general/Image";
import styles from "./imageSliderBlock.module.scss";

// import swiper modules & styles
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "./swiper.scss";

export const ImageSliderBlock = ({
  block,
  hero,
  pageContent
}: {
  block: ImageSliderBlockType | any;
  hero?: boolean;
  pageContent?: boolean;
}) => {
  return (
    <div className={styles.imageSliderBlock} data-hero={hero} data-pagecontent={pageContent}>
      <Swiper
        pagination={{
          type: "fraction",
        }}
        navigation={true}
        modules={[Pagination, Navigation]}
        className="mySwiper"
      >
        {block.images &&
          block.images.map((imageItem: any, index: number) => (
            <SwiperSlide key={index}>
              <ImageFigure
                key={imageItem.image.id}
                src={imageItem.image.url}
                alt={imageItem.image.alt ?? ""}
                width={imageItem.image.width}
                height={imageItem.image.height}
                attribution={imageItem.image.attribution}
                caption={imageItem.text}
                sizes="100vw"
              />
            </SwiperSlide>
          ))}
      </Swiper>
    </div>
  );
};
