import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import p1 from "../../../public/images/product/1.png";
import p2 from "../../../public/images/product/2.png";
import p3 from "../../../public/images/product/3.png";
import p4 from "../../../public/images/product/4.png";
import CardNormal from "@comp/Cards/CardNormal/Page";

const BeautySection = ({ data }) => {
  console.log("BeautySection", data);
  return (
    <section className="mb-10 pb-10 xs:bg-sky-500 lg:bg-transparent xs:mx-3 lg:mx-0 xs:px-5 lg:px-0 xs:rounded-3xl lg:rounded-[0px] xs:mt-0 lg:mt-20">
      <div className=" relative xs:hidden lg:block  ">
        <div className="w-full flex justify-end absolute ">
          <svg
            width="700"
            height="400"
            viewBox="0 0 1037 590"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="mr-[20px]"
          >
            <path
              d="M25.6693 0H1012C1025.81 0 1037 11.1929 1037 25V565C1037 578.807 1025.81 590 1012 590H371.096C362.569 590 354.631 585.654 350.036 578.472L4.60942 38.4715C-6.03513 21.8311 5.91551 0 25.6693 0Z"
              fill="#219EBC"
            />
          </svg>
        </div>
      </div>

      <div className="xs:px-0 lg:px-20">
        <div className="w-full rtl relative  ">
          <div className="pt-5 flex relative justify-between">
            <p className="mb-0 text-white  font-bold  xs:text-sm lg:text-2xl xl:text-2xl">
              لوازم بهداشتی زیبایی{" "}
            </p>
          </div>
        </div>
        <Swiper
          spaceBetween={50}
          slidesPerView={6.2}
          onSlideChange={() => console.log("slide change")}
          onSwiper={(swiper) => console.log(swiper)}
          className="rtl relative mt-5"
          breakpoints={{
            320: {
              slidesPerView: 1.3,
            },
            480: {
              slidesPerView: 2,
            },
            768: {
              slidesPerView: 3,
            },
            1024: {
              slidesPerView: 4.5,
            },
            1440: {
              slidesPerView: 6,
            },
          }}
        >
          {data?.map((e, index) => (
            <SwiperSlide key={index}>
              <CardNormal data={e} />
            </SwiperSlide>
          ))}
        </Swiper>

        <div className="mx-5 mt-8">
          <p className="mb-0 text-sm text-gray-600 xs:text-white md:text-black">
            مشاهده بیشتر{" "}
          </p>
        </div>
      </div>
    </section>
  );
};

export default BeautySection;