"use client"
// NOTE React-Slick and slick-carousel goes together. DO install both
import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import Image from 'next/image'

export default function FeaturedScreenTwo() {
    const settings = {
        dots: true,
        autoplay: true,
        infinite: true,
        centerMode: true,
        
        className: 'center',
        centerPadding: '60px',
      
        slidesToShow: 5,
        slidesToScroll: 1,
        speed: 4000,
        // autoplaySpeed: 2000,
        cssEase: "linear",
      
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 5,
              slidesToScroll: 1,
            //   initialSlide: 1,
            //   infinite: true,
            //   dots: true,
            },
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 1,
            },
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
            },
          },
        ],
      };
    
    return (
        <div className='carousel-container'>
          <Slider
            {...settings}
          >
            {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
            <div className='slider-img-con'>
              <img src={'/assets/images/slider/app_sliders/screen_1.png'} alt="image" />
            </div>
            <div className='slider-img-con'>
              <img src={'/assets/images/slider/app_sliders/screen_2.png'} alt="image" />
            </div>
            <div className='slider-img-con'>
              <img src={'/assets/images/slider/app_sliders/screen_3.png'} alt="image" />
            </div>
            <div className='slider-img-con'>
              <img src={'/assets/images/slider/app_sliders/screen_6.png'} alt="image" />
            </div>
            <div className='slider-img-con'>
              <img src={'/assets/images/slider/app_sliders/screen_4.png'} alt="image" />
            </div>
            <div className='slider-img-con'>
              <img src={'/assets/images/slider/app_sliders/screen_7.png'} alt="image" />
            </div>
            <div className='slider-img-con'>
              <img src={'/assets/images/slider/app_sliders/screen_5.png'} alt="image" />
            </div>
          </Slider>
        </div>
      );
}