'use client';
import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// import { Navigation, Pagination, Autoplay } from 'swiper';
import IconCaretDown from '@/components/icon/icon-caret-down';
// import PanelCodeHighlight from '@/components/panel-code-highlight';
import { IRootState } from '@/store';
import { useSelector } from 'react-redux';
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
import Image from 'next/image';

const ComponentsCarousel = () => {
    const items = ['https://vristo-next.vercel.app/assets/images/carousel1.jpeg', 'https://vristo-next.vercel.app/assets/images/carousel1.jpeg', 'https://vristo-next.vercel.app/assets/images/carousel1.jpeg'];

    const themeConfig = useSelector((state: IRootState) => state.themeConfig);
    return (
        <div className=' bg-neutral-200 rounded-[32px]'>
            <Swiper
                modules={[Navigation, Autoplay, Pagination]}
                navigation={{
                    nextEl: '.swiper-button-next-ex2',
                    prevEl: '.swiper-button-prev-ex2',
                }}
                pagination={{ clickable: true ,}}
                autoplay={{ delay: 2000 }}
                className="swiper mx-auto   h-[600px] bg-neutral-200 rounded-[32px]"
                id="slider2"
                dir={themeConfig.rtlClass}
                key={themeConfig.rtlClass === 'rtl' ? 'true' : 'false'}
            >
                <div className="swiper-wrapper">
                    {items.map((item, i) => {
                        return (
                            <SwiperSlide key={i}>
                                <ImageItemCarousel src={item} />
                            </SwiperSlide>
                        );
                    })}
                </div>
                <button className="swiper-button-prev-ex2 absolute top-1/2 z-[999] grid -translate-y-1/2 place-content-center rounded-full border border-primary p-1  text-primary transition hover:border-primary hover:bg-primary hover:text-white ltr:left-2 rtl:right-2">
                    <IconCaretDown className="h-5 w-5 rotate-90 rtl:-rotate-90" />
                </button>
                <button className="swiper-button-next-ex2 absolute top-1/2 z-[999] grid -translate-y-1/2 place-content-center rounded-full border border-primary p-1  text-primary transition hover:border-primary hover:bg-primary hover:text-white ltr:right-2 rtl:left-2">
                    <IconCaretDown className="h-5 w-5 -rotate-90 rtl:rotate-90" />
                </button>
            </Swiper>
        </div>

    );
};

export default ComponentsCarousel;


export const ImageItemCarousel = ({ src }: { src: string }) => {
    const [isError, setIsError] = useState(false)
    return (
        <>
            {!isError &&
                <Image loading='lazy' onError={(e) => {
                    setIsError(true)

                }} height={100} width={100} src={src} className=" w-full h-full object-center" alt="itemImage" />

            }
        </>
    )
}