"use client";

import Image from 'next/image'
import 'swiper/css';
// import 'swiper/css/pagination';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import type {Swiper as SwiperType} from 'swiper';
import type { PaginationOptions } from 'swiper/types';
import { ProductMediaType } from "@/components/catalog/type";
import {
  baseUrl,
  getImageUrl
} from "@/utils/constants";
export function ProductMedia({ mediaData }: {mediaData: Array<ProductMediaType>; }) {

    const pagination: PaginationOptions = {
        el: '.product-media-swiper-pagination',
        type: 'custom',
        renderCustom: function (swiper: SwiperType, current: number, total: number) {
            return current + '/' + total;
        },
    };
    let mediaJSX = <></>;
    if(mediaData.length) {
        mediaJSX = (
            <Swiper
                pagination={pagination}
                modules={[Pagination]}
                className="product-media-swiper"
                onSlideChange={() => console.log('slide change')}
                onSwiper={(swiper) => console.log(swiper)}
            >
                {
                    mediaData.map((img) => {
                        return (
                            <SwiperSlide key={img.id}>
                                <Image className="block w-full"
                                    src={getImageUrl(img.publicPath,baseUrl)}
                                    width={390}
                                    height={520}
                                    loading="eager"
                                    alt="Picture of the author"
                                />
                            </SwiperSlide>
                        );
                    }) 
                }
                
                <div slot="container-end">
                    <div className="product-media-swiper-pagination z-1 absolute bottom-6 left-1/2 transform-[translateX(-50%)] pt-1.5 pb-1.5 pl-3 pr-3 rounded-3xl text-ly-14 text-white bg-ly-deepgreen/50"></div>
                </div>
            </Swiper>
        );
    }
    return mediaJSX;

}