"use client"
import React, {useState} from 'react'
import Carousel from 'react-simply-carousel';
import Image from 'next/image'

export default function FeaturedScreenTwo() {
    const [activeSlide, setActiveSlide] = useState(0);
    const handleSlideIndexChange = () => {
        setActiveSlideIndex(2)
    }
    
    return (
        <div className='carousel pt-5'>
          <Carousel
            activeSlideIndex={activeSlide}
            onRequestChange={setActiveSlide}
            itemsToShow={1}
            itemsToScroll={1}
            infinite={true}
            autoplay={true}
            // delay={3000}
            autoplayDelay={5000}
            speed={3000}
            easing="linear"
            centerMode
            preventScrollOnSwipe
            swipeTreshold={60}
            updateOnItemClick={true}
            activeSlideProps={{
                style: {
                  transform: 'scale(1)'
                }
              }}
            containerProps={{
                style: {
                    width: "100%",
                    justifyContent: "space-between",
                    userSelect: "none"
                }
            }}
            forwardBtnProps={{
              //here you can also pass className, or any other button element attributes
              style: {
                alignSelf: 'center',
                background: 'black',
                border: 'none',
                borderRadius: '50%',
                color: 'white',
                cursor: 'pointer',
                fontSize: '20px',
                height: 30,
                lineHeight: 1,
                textAlign: 'center',
                width: 30,
                display: 'none'
              },
              children: <span>{`>`}</span>,
            }}
            backwardBtnProps={{
              //here you can also pass className, or any other button element attributes
              style: {
                alignSelf: 'center',
                background: 'black',
                border: 'none',
                borderRadius: '50%',
                color: 'white',
                cursor: 'pointer',
                fontSize: '20px',
                height: 30,
                lineHeight: 1,
                textAlign: 'center',
                width: 30,
                display: 'none'
              },
              children: <span>{`<`}</span>,
            }}
            dotsNav={{
                show: true,
                itemBtnProps: {
                    style: {
                    height: 16,
                    width: 16,
                    borderRadius: "50%",
                    border: 0
                    }
                },
                activeItemBtnProps: {
                    style: {
                    height: 16,
                    width: 16,
                    borderRadius: "50%",
                    border: 0,
                    background: "black"
                    }
                }
            }}
            responsiveProps={[
                {
                itemsToShow: 1,
                itemsToScroll: 1,
                minWidth: 0,
              },
              {
                itemsToShow: 3,
                itemsToScroll: 1,
                minWidth: 568,
              },
              {
                itemsToShow: 5,
                itemsToScroll: 1,
                minWidth: 992,
              },
              {
                itemsToShow: 7,
                itemsToScroll: 1,
                minWidth: 1440,
              },
            ]}
          >
            {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
            <div className='slider' style={{ background: 'transparent' }}>
              <img src={'/assets/images/slider/app_sliders/screen_1.png'} alt="image" />
            </div>
            <div className='slider' style={{ background: 'transparent' }}>
              <img src={'/assets/images/slider/app_sliders/screen_2.png'} alt="image" />
            </div>
            <div className='slider' style={{ background: 'transparent' }}>
              <img src={'/assets/images/slider/app_sliders/screen_3.png'} alt="image" />
            </div>
            <div className='slider' style={{ background: 'transparent' }}>
              <img src={'/assets/images/slider/app_sliders/screen_6.png'} alt="image" />
            </div>
            <div className='slider' style={{ background: 'transparent' }}>
              <img src={'/assets/images/slider/app_sliders/screen_4.png'} alt="image" />
            </div>
            <div className='slider' style={{ background: 'transparent' }}>
              <img src={'/assets/images/slider/app_sliders/screen_7.png'} alt="image" />
            </div>
            <div className='slider' style={{ background: 'transparent' }}>
              <img src={'/assets/images/slider/app_sliders/screen_5.png'} alt="image" />
            </div>
          </Carousel>
        </div>
      );
}