"use client";
import Slider from "react-slick";
import data from "../../Data/heroData.json";
import loadBackgroudImages from "../Common/loadBackgroudImages";
import { useEffect, useState } from "react";
import VideoModal from "../VideoModal/VideoModal";
import Link from "next/link";
import Image from "next/image";

const HomeSlider = () => {
  const [selectedProperty, setSelectedProperty] = useState(null);

  const handleSelection = (propertyType) => {
    setSelectedProperty(propertyType);
  };

  useEffect(() => {
    loadBackgroudImages();
  }, []);

  const [iframeSrc, setIframeSrc] = useState("about:blank");
  const [toggle, setToggle] = useState(false);

  const handelClick = () => {
    setIframeSrc("https://www.youtube.com/embed/rRid6GCJtgc");
    setToggle(!toggle);
  };
  const handelClose = () => {
    setIframeSrc("about:blank");
    setToggle(!toggle);
  };

  const settings = {
    dots: true,
    infinite: true,
    speed: 900,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    swipeToSlide: true,
  };

  return (
    <div className="homeSlider-area">
      <Slider {...settings}>
        {data.map((item, i) => (
          <div key={i} className="cs_slide">
            <div
              className="cs_hero cs_style_1 cs_bg_filed cs_primary_bg cs_center cover"
              data-background={item.bgImg}
            >
              <div className="container">
                <div
                  className="cs_hero_text wow fadeInRight"
                  data-wow-duration="0.9s"
                  data-wow-delay="0.25s"
                >
                  <div className="inspection-container">
                    <div className="heading">
                      <h2>Schedule Your Free Inspection</h2>
                    </div>
                    <div className="subheading">
                      <p>What type of property is this inspection for?</p>
                    </div>
                    <div className="property-buttons">
                      <button
                        className={`property-btn ${
                          selectedProperty === "residential" ? "selected" : ""
                        }`}
                        onClick={() => handleSelection("residential")}
                      >
                        <div className="icon-container">
                          <Image
                            src="/assets/img/icons/air_conditioner.svg"
                            alt="HVAC Icon"
                            width={50}
                            height={30}
                          />
                        </div>
                        HVAC
                      </button>
                      <button
                        className={`property-btn ${
                          selectedProperty === "business" ? "selected" : ""
                        }`}
                        onClick={() => handleSelection("business")}
                      >
                        <div className="icon-container">
                          <Image
                            src="/assets/img/icons/plumbing.svg"
                            alt="plumbing Icon"
                            width={50}
                            height={30}
                          />
                        </div>
                        Plumbing
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div className="cs_hero_img">
                <Image src={item.img} alt="img" width={902} height={850} />
              </div>
            </div>
          </div>
        ))}
      </Slider>

      <VideoModal
        isTrue={toggle}
        iframeSrc={iframeSrc}
        handelClose={handelClose}
      ></VideoModal>
    </div>
  );
};

export default HomeSlider;
