'use client'

import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation } from 'swiper/modules';
import 'swiper/css/bundle';
import { useRouter } from 'next/navigation';
import axios from 'axios';
import { BaseURL } from '../../../utils/BaseUrl';
import { ProductType } from '@/type/ProductType'

interface Props {
    data: Array<ProductType>;
    start: number;
    limit: number;
}

const Collection: React.FC<Props> = ({ data }) => {
    const router = useRouter()


    const handleCategoryClick = (category: string) => {
        router.push(`/shop/breadcrumb-img?category=${category}`);
    };

    return (
        <>
            <div className="trending-block style-six md:pt-20 pt-10">
                <div className="container">
                    <div className="heading3 text-center">Shop By Categories
                    </div>
                    <div className="list-trending section-swiper-navigation style-small-border style-outline md:mt-10 mt-6">
                        <Swiper
                            spaceBetween={12}
                            slidesPerView={2}
                            navigation
                            loop={true}
                            modules={[Navigation, Autoplay]}
                            breakpoints={{
                                576: {
                                    slidesPerView: 3,
                                    spaceBetween: 12,
                                },
                                768: {
                                    slidesPerView: 4,
                                    spaceBetween: 20,
                                },
                                992: {
                                    slidesPerView: 5,
                                    spaceBetween: 20,
                                },
                                1290: {
                                    slidesPerView: 6,
                                    spaceBetween: 30,
                                },
                            }}
                            className='h-full'
                        >
                            {
                                data?.map((cat: any) => {
                                    return (
                                        <SwiperSlide>
                                            <div className="trending-item block relative cursor-pointer" onClick={() => handleCategoryClick(cat?.name)}>
                                                <div className="bg-img rounded-[32px] overflow-hidden">
                                                    <Image
                                                        src={cat?.image}
                                                        width={1000}
                                                        height={1000}
                                                        alt='outerwear'
                                                        priority={true}
                                                        className='w-full'
                                                    />
                                                </div>
                                                <div className="trending-name text-center mt-5 duration-500">
                                                    <span className='heading6'>{cat?.name}</span>
                                                </div>
                                            </div>
                                        </SwiperSlide>
                                    )
                                })
                            }

                            {/* <SwiperSlide>
                                <div className="trending-item block relative cursor-pointer" onClick={() => handleCategoryClick('pet')}>
                                    <div className="bg-img rounded-[32px] overflow-hidden">
                                        <Image
                                            src={'/images/collection/outfit.png'}
                                            width={1000}
                                            height={1000}
                                            alt='swimwear'
                                            priority={true}
                                            className='w-full'
                                        />
                                    </div>
                                    <div className="trending-name text-center mt-5 duration-500">
                                        <span className='heading6'>Outfits</span>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide>
                                <div className="trending-item block relative cursor-pointer" onClick={() => handleCategoryClick('pet')}>
                                    <div className="bg-img rounded-[32px] overflow-hidden">
                                        <Image
                                            src={'/images/collection/bed.png'}
                                            width={1000}
                                            height={1000}
                                            alt='clothes'
                                            priority={true}
                                            className='w-full'
                                        />
                                    </div>
                                    <div className="trending-name text-center mt-5 duration-500">
                                        <span className='heading6'>Beds</span>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide>
                                <div className="trending-item block relative cursor-pointer" onClick={() => handleCategoryClick('pet')}>
                                    <div className="bg-img rounded-[32px] overflow-hidden">
                                        <Image
                                            src={'/images/collection/toys.png'}
                                            width={1000}
                                            height={1000}
                                            alt='sets'
                                            priority={true}
                                            className='w-full'
                                        />
                                    </div>
                                    <div className="trending-name text-center mt-5 duration-500">
                                        <span className='heading6'>Toys</span>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide>
                                <div className="trending-item block relative cursor-pointer" onClick={() => handleCategoryClick('pet')}>
                                    <div className="bg-img rounded-[32px] overflow-hidden">
                                        <Image
                                            src={'/images/collection/supplements.png'}
                                            width={1000}
                                            height={1000}
                                            alt='accessories'
                                            priority={true}
                                            className='w-full'
                                        />
                                    </div>
                                    <div className="trending-name text-center mt-5 duration-500">
                                        <span className='heading6'>Supplements</span>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide>
                                <div className="trending-item block relative cursor-pointer" onClick={() => handleCategoryClick('pet')}>
                                    <div className="bg-img rounded-[32px] overflow-hidden">
                                        <Image
                                            src={'/images/collection/pharmacy.png'}
                                            width={1000}
                                            height={1000}
                                            alt='lingerie'
                                            priority={true}
                                            className='w-full'
                                        />
                                    </div>
                                    <div className="trending-name text-center mt-5 duration-500">
                                        <span className='heading6'>Pharmacy</span>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide>
                                <div className="trending-item block relative cursor-pointer" onClick={() => handleCategoryClick('pet')}>
                                    <div className="bg-img rounded-[32px] overflow-hidden">
                                        <Image
                                            src={'/images/collection/ring.png'}
                                            width={1000}
                                            height={1000}
                                            alt='lingerie'
                                            priority={true}
                                            className='w-full'
                                        />
                                    </div>
                                    <div className="trending-name text-center mt-5 duration-500">
                                        <span className='heading6'>Ring</span>
                                    </div>
                                </div>
                            </SwiperSlide> */}
                        </Swiper>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Collection