"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import ContactFormBox from "./ContactFormBox";
import { Autoplay } from "swiper/modules";
import { useState } from "react";
import Image from "next/image";

type HeroSliderProps = {
  onClickBook?: () => void;
};

type HeroSlideItem = {
  title: string;
  description: string;
  img: string;
};

export default function HeroSlider({ onClickBook }: HeroSliderProps) {
  const [slideItems] = useState<HeroSlideItem[]>([
    {
      title: "Real Estate, Redefined",
      description: "Where Southern Charm Meets Boutique Real Estate",
      img: "/images/bg-header2.jpg",
    },
    {
      title: "Your Vision, Our Expertise",
      description: "Discover a Smarter Way to Buy & Sell",
      img: "/images/bg-header3.jpg",
    },
  ]);

  return (
    <section className="section flex! flex-row! justify-end! relative! min-h-96! lg:min-h-auto!">
      <Swiper
        className="absolute w-full h-full"
        modules={[Autoplay]}
        spaceBetween={50}
        slidesPerView={1}
        autoplay={{ delay: 4000 }}
        loop
      >
        {slideItems.map((slide, idx) => (
          <SwiperSlide key={idx}>
            <Image
              alt={slide.title}
              src={slide.img}
              quality={100}
              fill
              sizes="100vw"
              style={{
                objectFit: "cover",
              }}
            />
            <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full z-20">
              <div className="container">
                <div className="row">
                  <div className="col-12 col-lg-8 text-wrap space-y-5 md:space-y-8 lg:space-y-12">
                    <div className="text-4xl lg:text-8xl! font-playfairdisplay text-center! lg:text-left!">
                      {slide.title}
                    </div>
                    <div className="text-lg lg:text-5xl! font-montserrat text-center! lg:text-left!">
                      {slide.description}
                    </div>
                    <div className="context-dark flex flex-row justify-center lg:hidden">
                      <button onClick={onClickBook} className="button button-xs button-primary-outline">
                        BOOK APPOINTMENT
                      </button>
                    </div>
                    <div className="context-dark flex flex-row justify-center lg:hidden">
                      <a href="tel:(478) 225 9061" className="button button-xs button-primary-outline">
                        Call Us
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </SwiperSlide>
        ))}
      </Swiper>

      <ContactFormBox />
    </section>
  );
}