import CardNormal from "@comp/Cards/CardNormal/page";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import khane from "../../../public/images/khane.jpg";
import CardSurprise from "@comp/Cards/CardSurprise/page";
import Link from "next/link";

const HomeSection = ({ data }) => {
  return (
    <section className="xs:mb-0 lg:mb-20">
      <div className=" xs:px-5 lg:px-20 mt-10">
        <div className="grid xs:grid-cols-1 lg:grid-cols-3 rtl ">
          <div className="rounded-3xl overflow-hidden relative z-10 h-fit">
            <div className="w-full">
              <Image
                src={khane}
                className="object-cover"
                alt="آرایش و بهداشت مو وسمه"
              />
            </div>
          </div>

          <div className="relative xs:left-[0px] lg:left-[30px] xs:top-[-35px] lg:top-0 col-span-2 z-0 rounded-3xl  xs:pr-5 lg:pr-[55px] xs:pt-[55px] lg:pt-3 xl:pt-10 pl-5 xs:pb-10 lg:pb-0">
            <div className="xs:block lg:flex">
              <h2 className="xs:text-2xl lg:text-xl xl:text-3xl font-bold">
                آرایش و مراقبت مو
              </h2>

              <p className="mb-0 w-fit bg-sky-200 rounded-full py-1 px-3 xs:mr-0 lg:mr-2 xs:mt-2 lg:mt-0 xs:text-sm lg:text-sm xl:text-base ">
                به صرفه شـــــــــــــو
              </p>
            </div>

            <Swiper
              spaceBetween={50}
              slidesPerView={6.2}
              // onSlideChange={() => console.log("slide change")}
              // onSwiper={(swiper) => console.log(swiper)}
              className="rtl relative mt-4"
              breakpoints={{
                320: {
                  slidesPerView: 1.3,
                },
                480: {
                  slidesPerView: 2,
                },
                768: {
                  slidesPerView: 3,
                },
                1024: {
                  slidesPerView: 3.4,
                },
                1440: {
                  slidesPerView: 3.8,
                },
              }}
            >
              {data?.map((e, index) => (
                <SwiperSlide key={index}>
                  <CardSurprise data={e} priority />
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>
        <Link
          href={
            "/categories/3df995d4-6a36-4de2-9557-a5c3304529fe/آرایش-و-مراقبت-مو"
          }
          className="z-90 relative"
        >
          <div className="mx-5">
            <p className="mb-0 text-sm text-gray-600 xs:text-white md:text-black">
              مشاهده بیشتر{" "}
            </p>
          </div>
        </Link>
      </div>
    </section>
  );
};

export default HomeSection;