"use client";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import {Autoplay, Navigation, Pagination} from "swiper/modules";
import {Swiper, SwiperSlide} from "swiper/react";
import "swiper/swiper.css";
export default function PageSlider({lang}: {lang: string}) {
  return (
    <>
      <Swiper
        loop={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        navigation={false}
        modules={[Pagination, Navigation, Autoplay]}
        className="lg:h-[75vh] h-[460px] relative"
      >
        {/* <div
          className={`container absolute z-10 top-0 w-full h-full  flex items-end ${
            lang === "en" ? "bg-linear-to-r" : "bg-linear-to-l"
          } from-white/70 to-transparent`}
        >
          <div className="py-20 space-y-2">
            <h1 className="text-[40px] text-blue-primary font-semibold"></h1>
            <p className="text-blue-primary lg:text-3xl text-lg  font-medium"></p>
            <p className="text-blue-primary lg:text-xl  text-md font-medium"></p>
          </div>
        </div> */}
        <div className="container absolute z-10 bottom-0 bg-black/40 w-full h-full " >
          <div className="p-20 absolute bottom-0">
            <p className="text-4xl text-white mb-6 font-extrabold">هستیم برای سلامتی شما ...</p>
            <Link
              href="/reservation"
              className="!bg-secondary !text-white lg:!w-[346px] !w-full !h-[57px] !rounded-[15px] !text-[24px] !font-medium flex items-center justify-center"
            >
              دریافت نوبت آنلاین
            </Link>
          </div>
        </div>
        <SwiperSlide className="h-full w-full relative">
          <Image
            loading="lazy"
            src={"/1daad534bbd4cd30c325dde4746d01bcc3752e98.jpg"}
            fill
            style={{
              color: "transparent",
              objectFit: "cover",
              objectPosition: "center",
            }}
            alt=""
          />
        </SwiperSlide>
        {/* <SwiperSlide>
        <Image
          loading="lazy"
          src={"/header-slider-1.webp"}
          fill
          style={{color: "transparent", objectFit: "cover"}}
          alt=""
        />
      </SwiperSlide> */}
      </Swiper>
    </>
  );
}
