import styles from './Banner.module.css'
import React from "react";
import { Carousel } from "antd";
import Button from '../Button/Button.tsx';

export interface SlideItem {
id: number;
image: string;
title: string;
subtitle: string;
description: string;
}


const slides: SlideItem[] = [
    {
        id: 1,
        image: "/images/banner1.jpg",
        title: "ПРОИЗВОДСТВО",
        subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
        description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
    },
    {
        id: 2,
        image: "/images/banner2.jpg",
        title: "ПРОИЗВОДСТВО",
        subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
        description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
    },
    {
        id: 3,
        image: "/images/banner3.jpg",
        title: "ПРОИЗВОДСТВО",
        subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
        description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
    },
];


const BannerSlider: React.FC = () => {

const handleClick = () => {
        console.log('Кнопка нажата!');
    };

return (
    <div className={styles.wrapper}>
        <Carousel autoplay dots className={styles.carousel}>
            {slides.map((slide) => (
                <div key={slide.id}>
                    <div className={styles.slide}>
                        <div className={styles.textBlock}>
                            <h2>{slide.title}</h2>
                            <h1>
                            {slide.subtitle}
                            <br /> {slide.description}
                            </h1>
                            <Button 
                                label="СМОТРЕТЬ КАТАЛОГ" 
                                onClick={handleClick}
                            />
                        </div>
                        <img src={slide.image} alt="banner" className={styles.image} />
                    </div>
                </div>
            ))}
        </Carousel>
    </div>
    );
};


export default BannerSlider;