'use client'

import Image from "next/image";
import {Container} from "@/shared/components/Container/Container";
import styles from './WideChoiceSection.module.css';
import {WideChoiceItem} from "@/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem";
import bear from '@/shared/assets/images/bear.png'
import tools from '@/shared/assets/images/tools.png'
import ball from '@/shared/assets/images/ball.png'
import stationery from '@/shared/assets/images/stationery.png'
import huntingAndFishing from '@/shared/assets/images/hunting and fishing.png'
import feast from '@/shared/assets/images/feast.png'
import healthAndBeauty from '@/shared/assets/images/health and beauty.png'
import electronics from '@/shared/assets/images/electronics.png'
import sliderArrowLeft from "@/shared/assets/icons/sliderArrowLeft.svg";
import sliderArrowRight from "@/shared/assets/icons/sliderArrowRight.svg";
import Slider, {Settings} from "react-slick";

export function WideChoiceSection() {
    const settings: Settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4,
        lazyLoad: 'progressive',
        prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
        nextArrow: <Image src={sliderArrowRight} alt={''}/>,
        responsive: [
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                }
            }
        ]
    };

    return (
        <section>
            <Container>
                <div className={styles.innerContainer}>
                    <h3 className={styles.heading}>Обширный выбор товаров из различных категорий.</h3>
                    <p className={styles.subHeading}>Более миллиона товаров - ассортимент обновляется ежедневно</p>
                    <Slider {...settings}>
                        <WideChoiceItem imgSrc={bear} name={'Детские игрушки'} alt={'Детские игрушки'}/>
                        <WideChoiceItem imgSrc={tools} name={'Инструменты'} alt={'Инструменты'}/>
                        <WideChoiceItem imgSrc={ball} name={'Спортивные товары'} alt={'Спортивные товары'}/>
                        <WideChoiceItem imgSrc={stationery} name={'Канцтовары'} alt={'Канцтовары'}/>
                        <WideChoiceItem imgSrc={huntingAndFishing} name={'Охота и рыбалка'} alt={'Охота и рыбалка'}/>
                        <WideChoiceItem imgSrc={feast} name={'Праздник'} alt={'Праздник'}/>
                        <WideChoiceItem imgSrc={healthAndBeauty} name={'Красота и здоровье'} alt={'Красота и здоровье'}/>
                        <WideChoiceItem imgSrc={electronics} name={'Электроника'} alt={'Электроника'}/>
                    </Slider>
                </div>
            </Container>
        </section>
    );
};