'use client';

import React, { useState } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const ScreenList = [
    {
        id: '1',
        title: 'Plan your working hours',
        screen: '/images/slider-1.png'
    },
    {
        id: '2',
        title: 'Accept customers applications',
        screen: '/images/slider-2.png'
    },
    {
        id: '3',
        title: 'Make video calls',
        screen: '/images/slider-3.png'
    },
    {
        id: '4',
        title: 'Keep statistics',
        screen: '/images/slider-4.png'
    },
    {
        id: '5',
        title: 'Get paid',
        screen: '/images/slider-5.png'
    },
    {
        id: '6',
        title: 'Plan your working hours',
        screen: '/images/slider-1.png'
    },
    {
        id: '7',
        title: 'Accept customers applications',
        screen: '/images/slider-2.png'
    },
    {
        id: '8',
        title: 'Make video calls',
        screen: '/images/slider-3.png'
    },
    {
        id: '9',
        title: 'Keep statistics',
        screen: '/images/slider-4.png'
    },
    {
        id: '10',
        title: 'Get paid',
        screen: '/images/slider-5.png'
    }
];

export const ScreenCarousel = () => {
    const [title, setTitle] = useState<string>(ScreenList[0].title);
    const settings = {
        dots: false,
        autoplay: true,
        infinite: true,
        speed: 500,
        slidesToShow: 5,
        slidesToScroll: 1,
        arrows: false,
        afterChange: (current: number) => {
            setTitle(ScreenList[current].title);
        }
    };

    return (
        <div className="b-inner">
            <h2 id="slider-title" className="title-h2">{title}</h2>
            <Slider {...settings} className="slider">
                {ScreenList.map(({ id, screen }) => (
                    <div key={id} className="slider-item">
                        <img src={screen} alt="" className="slider-img" />
                    </div>
                ))}
            </Slider>
        </div>
    );
};
