import React, { useRef, useState } from "react";
import styles from "./ContactProduct.module.css";
import Button from "../Button/Button";
import { Carousel } from "antd";
import ModalRequestForm from "../ModalRequestForm/ModalRequestForm";
const imageUrl = "http://sprint-pro.com/images/banners/slide1/t1.png";
import image1 from "../../assets/images/mainPage/_.jpg"
import image2 from "../../assets/images/mainPage/orig.jpg"

interface ProductionSlide {
  id: number;
  image: string;
  label: string;
}

const slides: ProductionSlide[] = [
  {
    id: 1,
    image: image1,
    label: ".",
  },
  {
    id: 2,
    image: image2,
    label: ".",
  },
];


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

    const [open, setOpen] = useState(false);

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

    const carouselRef = useRef<any>(null);

    console.log('ProductionBanner render, open:', open);

    return (
        <div className={styles.wrapper}>
            <ModalRequestForm open={open} onClose={() => setOpen(false)} />
      <div className={styles.left}>
        <h2 className={styles.title}>КОНТРАКТНОЕ</h2>
        <h1 className={styles.subtitle}>ПРОИЗВОДСТВО</h1>

        <Button 
            label="СДЕЛАТЬ ЗАПРОС" 
            onClick={() => setOpen(true)}
        />
      </div>

      <div className={styles.right}>
        <Carousel
          ref={carouselRef}
          dots={false}
          effect="scrollx"
          className={styles.carousel}
        >
          {slides.map((s) => (
            <div key={s.id} className={styles.slide}>
              <img src={s.image} className={styles.image} alt="prod" />
              <div className={styles.label}>{s.label}</div>
            </div>
          ))}
        </Carousel>

        <div className={styles.arrows}>
          <button
            className={styles.arrow}
            onClick={() => carouselRef.current?.prev()}
          >
            ←
          </button>
          <button
            className={styles.arrow}
            onClick={() => carouselRef.current?.next()}
          >
            →
          </button>
        </div>
      </div>
    </div>
    );
};


export default ProductionBanner;