import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
 import god1 from "../../assets/images/god1.png";
  import god2 from "../../assets/images/perumal.png"

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import "../../styles/heroSlider.css";
import { useNavigate } from "react-router-dom";

const slides = [
  {
    image: god1,
    title: "Find Your Perfect Life Partner",
    description:
      "Trusted matches, meaningful connections, lifelong happiness.",
    button: "Register Now",
  },
  {
    image: god2,
    title: "Where True Love Begins",
    description:
      "Discover compatible matches made just for you. Start your journey today.",
    button: "Register Now",
  },
];

const HeroSlider = () => {
  const navigate = useNavigate();
  return (
    <Swiper
      modules={[Autoplay, Pagination, Navigation]}
      autoplay={{ delay: 6000 }}
      pagination={{ clickable: true }}
      loop
      className="hero-swiper"
    >
      {slides.map((slide, index) => (
        <SwiperSlide key={index}>

          <div className="hero-wrapper">
          <div className="hero-slide">
            {/* Left Image */}
            <div className="hero-image">
              <img src={slide.image} alt="hero" />
            </div>

            {/* Right Content */}
            <div className="hero-content">
              <h2>{slide.title}</h2>
              <p>{slide.description}</p>
              <button onClick={()=>{
                navigate("/registration")
              }}>{slide.button}</button>
            </div>
          </div>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default HeroSlider;
