import Button from "@/components/Button";
import Image from "next/image";
import Link from "next/link";
import { FC } from "react";
import "swiper/css/navigation";
import { Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { useGetLanding } from "./hooks/useHomeData";

const HeroSection: FC = () => {
  const { data } = useGetLanding();

  return (
    <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
      {data?.data?.sliders?.map((item) => {
        return (
          <SwiperSlide key={item.id}>
            <div className="relative">
              <Image src={item.imageUrl} alt="banner" width={1920} height={1080} quality={100} className="w-full rounded-4xl object-cover  mt-4 min-h-[210px] max-h-[700px]" />

              <div className="absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-4xl">
                <div className="max-w-maxWidth flex flex-col mt-1 xl:mt-0 xl:items-start items-center w-full mx-auto px-10 xl:text-4xl text-lg text-white">
                  <p className="xl:text-lg text-sm">{item.title}</p>
                  <p className="xl:mt-5 mt-2 xl:text-2xl text-sm font-bold">{item.description}</p>

                  <Link href={item.link}>
                    <Button className="xl:mt-5 mt-2 w-fit! xl:px-10 px-5 h-8 xl:h-10 bg-white !text-black" label="بیشتر بدانید" />
                  </Link>
                </div>
              </div>
            </div>
          </SwiperSlide>
        );
      })}
    </Swiper>
  );
};

export default HeroSection;