"use client";

import { Swiper, SwiperSlide } from "swiper/react";

import { Navigation, Pagination } from "swiper/modules";
import NextImage from "../NextImage/imageCm";
import CardContainer from "../card-link-container/card-container";
import logo from "@/public/logo.png";
import Image from "next/image";
import { FaRegCalendar } from "react-icons/fa";
import { IoIosArrowDropright, IoIosArrowDroprightCircle } from "react-icons/io";
import Link from "next/link";

export default function ArticleSlider({ data, slidesPerView = 1 }) {
  return (
    <>
      <Swiper
        loop={true}
        slidesPerView={1}
        // navigation={true}
        spaceBetween={0}
        modules={[Pagination]}
        pagination={{
          clickable: true,
        }}
        breakpoints={
          slidesPerView != 1
            ? {
                1150: {
                  slidesPerView: slidesPerView,
                  spaceBetween: 30,
                },
                700: {
                  slidesPerView: 2,
                  spaceBetween: 10,
                },
              }
            : {}
        }
        className="!overflow-y-visible rounded-xl mySwiper"
        // parallax={true}
      >
        {data?.map((item, index) => (
          <SwiperSlide
            className="bg-transparent aspect-square cursor-pointer duration-300 group overflow-hidden  flex items-center"
            key={"slider-" + index}
          >
            <Link
              href={"/articles/" + item.id}
              className="!bg-primary-900 duration-300 blur-backdrop-box rounded-lg !bg-opacity-0 group-hover:!bg-opacity-40 cursor-pointer"
            ></Link>
            <div className="w-11/12 h-16 z-10 flex justify-center items-center bg-opacity-80  bg-primary-main rounded-full absolute -bottom-0 -right-10 border-[2px] border-white border-b-0">
              {item.title}
            </div>
            {/* <Link
              href={"/articles/" + item.id}
              className="w-44 aspect-square z-20 flex justify-center items-center  bg-secondary-main rounded-full absolute bottom-[-90px] left-[-74px]"
            >
              <IoIosArrowDropright
                fontSize={44}
                className="text-white rotate-180 duration-300 group-hover:right-[50px]  rounded-full p-1 absolute top-[36px] right-[44px] "
              />
            </Link> */}
            <div
              className="relative w-full h-[max-content] overflow-hidden "
              href={"/articles/" + item.id}
            >
              {/* <div className="absolute bg-white rounded-full z-20 top-4 left-4">
                <Image src={logo} width={64} height={64} alt="website logo" />
              </div> */}
              <div className="w-full aspect-square duration-300 transform group-hover:rotate-6  group-hover:scale-110  overflow-hidden rounded-lg ">
                <NextImage className="w-full" {...item.main_image} />
              </div>
              <div className="absolute flex flex-row font-semibold text-[16px] items-center gap-2 rounded-tr-[16px] z-20 py-2 px-8  left-0 top-0">
                <div className="flex justify-center items-center w-44 h-10 z-20 aspect-square bg-opacity-90 bg-secondary-main rounded-full absolute left-[10px] top-[10px]">
                  <FaRegCalendar className="ml-2" />
                  <span className="">
                    {item?.date?.jdate?.split("-")?.join("/") ?? "1402/2/10"}
                  </span>
                </div>
                {/* <div className="w-52 z-10 aspect-square bg-primary-main rounded-full absolute left-[-114px] top-[-90px]"></div> */}
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </>
  );
}