import { Swiper, SwiperSlide } from 'swiper/react';

import { Navigation } from 'swiper/modules';

import 'swiper/css';

import 'swiper/css/navigation';

import 'swiper/css/pagination';

import './index.css'; // Assuming you have your styles in a separate CSS file

const SwiperCarousel = () => {

    return (

      <div className='category-slider'>       

        <Swiper

          modules={[Navigation]}

          onSwiper={(swiper) => console.log(swiper)}

          onSlideChange={() => console.log('slide change')}

          spaceBetween={25}

          slidesPerView={5}

          navigation={{

            nextEl: '.review-swiper-button-next',

            prevEl: '.review-swiper-button-prev',

          }}

        >

            <SwiperSlide>

                <div className="category-card">

                    <img src="https://clicon-html.netlify.app/image/product/product-14.png" alt="" className='category-image' />

                    <h6 className="category-text">TV & Homes</h6>

                </div>

            </SwiperSlide>

            <SwiperSlide>

                <div className="category-card">

                    <img src="https://clicon-html.netlify.app/image/product/product-12.png" alt="" className='category-image' />

                    <h6 className="category-text">Accessories</h6>

                </div>

            </SwiperSlide>

            <SwiperSlide>

                <div className="category-card">

                    <img src="https://clicon-html.netlify.app/image/product/product-9.png" alt="" className='category-image' />

                    <h6 className="category-text">Computer & Laptop</h6>

                </div>

            </SwiperSlide>

            <SwiperSlide>

                <div className="category-card">

                    <img src="https://clicon-html.netlify.app/image/product/product-14.png" alt="" className='category-image' />

                    <h6 className="category-text">TV & Homes</h6>

                </div>

            </SwiperSlide>

            <SwiperSlide>

                <div className="category-card">

                    <img src="https://clicon-html.netlify.app/image/product/product-12.png" alt="" className='category-image' />

                    <h6 className="category-text">Accessories</h6>

                </div>

            </SwiperSlide>

            <SwiperSlide>

                <div className="category-card">

                    <img src="https://clicon-html.netlify.app/image/product/product-9.png" alt="" className='category-image' />

                    <h6 className="category-text">Computer & Laptop</h6>

                </div>

            </SwiperSlide>

          </Swiper>

          <button className="slick-arrow-carousel button-prev review-swiper-button-prev" >

            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

                <path d="M20.25 12H3.75" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>

                <path d="M10.5 5.25L3.75 12L10.5 18.75" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>

            </svg>

          </button>

          <button className="slick-arrow-carousel button-next review-swiper-button-next" >

              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

                  <path d="M3.75 12H20.25" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>

                  <path d="M13.5 5.25L20.25 12L13.5 18.75" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>

              </svg>

          </button>

      </div>

    );

}

export default SwiperCarousel;

.category-slider {

  width: 90% !important;

  position: relative;

  margin: 80px auto;

  text-align: center;

}

.category-slider .swiper {

  padding-right: 14px !important;

}

.category-slider .swiper-slide {

  border: 1px solid;

} 

.slick-arrow-carousel{ 

  position: absolute!important;

  top: 50%;

  transform: translateY(-50%); 

  background: transparent;

  border: 0;

  padding: 0;

  min-width: 48px;

  max-width: 48px;

  min-height: 48px;

  max-height: 48px;

  border-radius: 500px;

  display: flex!important;

  justify-content: center;

  align-items: center;

  background: orange;

  z-index: 99999;

  cursor: pointer;

}

.slick-arrow-carousel.swiper-button-disabled {

  background-color: grey;

  pointer-events: none;

}

.slick-arrow-carousel svg path {

  stroke: black;

}

.button-prev{

  left: -55px;     

}

.button-next{

  right: -55px;

}