"use client"
import React from 'react'
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, FreeMode, Navigation } from "swiper/modules";
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/free-mode';
import Link from 'next/link';
import useFetch from '@/app/hooks/useFetch';

const ProductSlider = ({ subdomain }) => {

    const { data: products, loading: productLoading } = useFetch("product/all-product");
    // console.log(products);

    return (
        <div className='pb-12 pt-10'>
            <p className='lg:text-3xl text-2xl text-center mb-4'>Explore Our All Products</p>
            <div className='container'>
                {
                    !productLoading ?
                        <Swiper
                            spaceBetween={16}
                            slidesPerView={1}
                            loop={true}
                            autoplay={{ delay: 5000, disableOnInteraction: false }}
                            // navigation={true}
                            modules={[Autoplay, FreeMode, Navigation]}
                            className="product Gallery"
                            breakpoints={{
                                0: { slidesPerView: 1 },
                                320: { slidesPerView: 1 },
                                375: { slidesPerView: 2 },
                                991: { slidesPerView: 3 },
                                1224: { slidesPerView: 4 },
                            }}

                        >


                            {products?.map((product, index) => (
                                <SwiperSlide key={index}>
                                    <Link href={subdomain ? `/location/${subdomain}/${product.slug}` : `/products/${product.slug}`} className="product-img">
                                        <img src={product?.img} alt={product?.name} title={product?.name} className="w-full rounded-2xl" />
                                    </Link>

                                    <div className="product-heading-type">
                                        <Link href={subdomain ? `/location/${subdomain}/${product.slug}` : `/products/${product.slug}`} className="block mt-4 py-2 mb-2 text-center btn text-[#fff] rounded">{product?.name}</Link>
                                    </div>
                                </SwiperSlide>
                            ))
                            }
                        </Swiper>
                        : null
                }
            </div>
        </div>
    )
}

export default ProductSlider