import React from "react";
import { Carousel } from "antd";
import { useNavigate } from "react-router-dom";
import styles from "./Banner.module.css";
import Button from "../Button/Button.tsx";
import banner_img1 from "../../assets/images/mainPage/ChatGPT-Image-Oct-1_-2025_-05_29_18-PM.png";
import banner_img2 from "../../assets/images/mainPage/296170994030930.jpg";

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

const slides: SlideItem[] = [
  {
    id: 1,
    image: banner_img1,
    title: "Производство",
    subtitle: "Труб, фитингов, колен и отводов",
    description: "для наружной и внутренней канализации",
  },
  {
    id: 2,
    image: banner_img2,
    title: "Производство",
    subtitle: "Труб, фитингов, колен и отводов",
    description: "для наружной и внутренней канализации",
  },
];

const BannerSlider: React.FC = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/products");
  };

  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;