"use client";
import { useEffect, useState } from "react";
import PaginationPages from "./PaginationPages";
import Image from "next/image";
import Link from "next/link";
import arrow from "@/public/assets/icons/arrow-right.svg";
import { formatedDate } from "@/lib/utils";
import { formatedDateAr } from "@/lib/utils";
import { useTranslations } from "next-intl";
import img from "@/public/assets/blog/blog-big-1.webp";
type Post = {
  id: number;
  title: string;
  slug: string;
  created_at: string;
  image: {
    image: string;
  };
  locales: {
    name: string;
    short_description: string;
  };
};

const PaginationMain = ({ data, locale }: { data: any; locale: string }) => {
  const dataArray  = data?.data?.data   ;
const [posts, setPosts] = useState<Post[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(5);
  const t = useTranslations("blogss");
  useEffect(() => {
    if (dataArray && Array.isArray(dataArray)) {
      setPosts(dataArray );
    }
  }, [dataArray]);
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts  : Post[]  = posts.slice(indexOfFirstPost, indexOfLastPost);
  const paginate = (pageNumber : number) => {
    setCurrentPage(pageNumber);
  };
  return (
    <>
      <div className="flex flex-col justify-center items-center  ">
        <div className="flex flex-col gap-6 ">
          {currentPosts?.length >= 5 && (
            <div className="grid xl:grid-cols-2 md:grid-cols-1 gap-6 ">
              <div className="flex flex-col justify-between  gap-6   ">
                <div className=" ">
                  <div
                    className="flex flex-col
                     shadow-[-4px_4px_35px_0px_rgba(0,_0,_0,_0.1)] rounded-2xl w-full h-[590px] overflow-hidden
                       "
                  >
                    <div className="overflow-hidden">
                      <Image
                        src={currentPosts[0]?.image?.image ?? img}
                        alt="img1"
                        className="object-cover w-full h-[307px] rounded-tl-[12px] rounded-tr-[12px] hover:scale-105 transition duration-500 ease-in-out"
                        width={600}
                        height={500}
                        quality={85}
                      />
                    </div>

                    {/* gap-[30px] md:gap-[80px] xl:gap-[70px] 2xl:gap-[80px] */}
                    <div
                      className="flex flex-col p-4 
                   
                     h-[222px] flex-grow-0"
                    >
                      <div className="flex flex-col gap-1">
                        <span className="text-paragraph text-[16px] font-light">
                          {locale === "en"
                            ? formatedDate(currentPosts[0]?.["created_at"])
                            : formatedDateAr(currentPosts[0]?.["created_at"])}
                        </span>
                        <span className="text-dark text-[20px] font-normal">
                          {currentPosts[0]?.locales?.name}
                        </span>
                        <p className="text-paragraph text-[14px] md:text-[16px] font-light md:line-clamp-3">
                          {currentPosts[0]?.locales?.["short_description"]}
                        </p>
                      </div>
                    </div>
                    <div className="flex flex-col px-4">
                      <span className="border border-b-1 border-light-stroke "></span>
                      <Link
                        href={`/en/blogs/${posts[0]?.slug}`}
                        className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end h-[61px] flex-shrink-0 `}
                      >
                        {t("Read")}
                        <Image
                          src={arrow}
                          alt="arrow"
                          className="object-cover  w-[19px] h-[19px]   lg:w-[24px] lg:h-[24px] "
                          width={24}
                          height={24}
                        />
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
              <div className="flex flex-col gap-6 justify-between ">
                <div
                  className="flex md:flex-row flex-col
                       shadow-[-4px_4px_35px_0px_rgba(0,_0,_0,_0.1)]  rounded-2xl overflow-hidden
                       "
                >
                  <div className="flex-col w-full md:w-[283px]  lg:w-[47%] lg:min-w-[350px] xl:w-[47%] xl:min-w-[283px] overflow-hidden rounded-tl-xl rounded-tr-xl md:rounded-tl-xl md:rounded-bl-xl">
                    <Image
                      src={currentPosts[1]?.image?.image}
                      alt="img1"
                      className="hover:scale-105 transition duration-500 ease-in-out object-cover w-full md:w-[283px] lg:w-[47%] lg:min-w-[350px] xl:w-[47%] xl:min-w-[283px]  h-[282px] rounded-tl-xl rounded-tr-xl md:rounded-tl-xl md:rounded-bl-xl"
                      width={500}
                      height={500}
                    />
                  </div>

                  <div className="flex flex-col p-4 w-full md:w-[444px] lg:w-full gap-[40px] md:gap-[70px] lg:gap-[50px] xl:gap-[60px]">
                    <div className="flex flex-col gap-2">
                      <span className="text-paragraph text-[16px] font-light">
                        {locale === "en"
                          ? formatedDate(currentPosts[1]?.["created_at"])
                          : formatedDateAr(currentPosts[1]?.["created_at"])}
                      </span>
                      <span className="text-dark  md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                        {currentPosts[1]?.locales?.name}
                      </span>
                      <p className="text-paragraph line-clamp-3 text-[14px] md:text-[16px] font-light">
                        {currentPosts[1]?.locales?.["short_description"]}
                      </p>
                    </div>
                    <div className="flex flex-col gap-4 ">
                      <span className="border border-b-1 border-light-stroke "></span>
                      <Link
                        href={`/en/blogs/${currentPosts[1]?.slug}`}
                        className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end`}
                      >
                        {t("Read")}
                        <Image
                          src={arrow}
                          alt="arrow"
                          className="object-cover  w-[19px] h-[19px]   lg:w-[24px] lg:h-[24px] "
                        />
                      </Link>
                    </div>
                  </div>
                </div>
                <div
                  className="flex md:flex-row flex-col
                       shadow-[-4px_4px_35px_0px_rgba(0,_0,_0,_0.1)]  rounded-2xl overflow-hidden
                       "
                >
                  <div className="flex-col w-full md:w-[283px]  lg:w-[47%] lg:min-w-[350px] xl:w-[47%] xl:min-w-[283px] overflow-hidden rounded-tl-xl rounded-tr-xl md:rounded-tl-xl md:rounded-bl-xl">
                    <Image
                      src={currentPosts[2]?.image?.image}
                      alt="img1"
                      className="hover:scale-105 transition duration-500 ease-in-out object-cover w-full md:w-[283px] lg:w-[47%] lg:min-w-[350px] xl:w-[47%] xl:min-w-[283px]  h-[282px] rounded-tl-xl rounded-tr-xl md:rounded-tl-xl md:rounded-bl-xl"
                      width={500}
                      height={500}
                    />
                  </div>

                  <div className="flex flex-col p-4 w-full md:w-[444px] lg:w-full gap-[40px] md:gap-[70px] lg:gap-[50px] xl:gap-[60px]">
                    <div className="flex flex-col gap-2">
                      <span className="text-paragraph text-[16px] font-light">
                        {locale === "en"
                          ? formatedDate(currentPosts[2]?.["created_at"])
                          : formatedDateAr(currentPosts[2]?.["created_at"])}
                      </span>
                      <span className="text-dark md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                        {currentPosts[2]?.locales?.name}
                      </span>
                      <p className="text-paragraph line-clamp-3 text-[14px] md:text-[16px] font-light">
                        {currentPosts[2]?.locales?.["short_description"]}
                      </p>
                    </div>
                    <div className="flex flex-col gap-4 ">
                      <span className="border border-b-1 border-light-stroke "></span>
                      <Link
                        href={`/en/blogs/${currentPosts[2]?.slug}`}
                        className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end`}
                      >
                        {t("Read")}
                        <Image
                          src={arrow}
                          alt="arrow"
                          className="object-cover  w-[19px] h-[19px]   lg:w-[24px] lg:h-[24px] "
                        />
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
          <div className="grid xl:grid-cols-2 md:grid-cols-1 gap-6">
            {currentPosts?.slice(3)?.map((item : any) => {
              return (
                <div
                  className="flex flex-col gap-6 justify-between  "
                  key={item.id}
                >
                  <div
                    className="flex md:flex-row flex-col
                     shadow-[-4px_4px_35px_0px_rgba(0,_0,_0,_0.1)]  rounded-2xl overflow-hidden
                     "
                  >
                    <div className="flex-col w-full md:w-[283px]  lg:w-[47%] lg:min-w-[350px] xl:w-[47%] xl:min-w-[283px] overflow-hidden rounded-tl-xl rounded-tr-xl md:rounded-tl-xl md:rounded-bl-xl">
                      <Image
                        src={item?.image?.image}
                        alt="img1"
                        className="hover:scale-105 transition duration-500 ease-in-out object-cover w-full md:w-[283px] lg:w-[47%] lg:min-w-[350px] xl:w-[47%] xl:min-w-[283px]  h-[282px] rounded-tl-xl rounded-tr-xl md:rounded-tl-xl md:rounded-bl-xl"
                        width={500}
                        height={500}
                      />
                    </div>

                    <div
                      className="flex flex-col p-4 w-full md:w-[444px] lg:w-full gap-[40px] md:gap-[70px] lg:gap-[50px] xl:gap-[60px] 
                  
                  "
                    >
                      <div className="flex flex-col gap-2">
                        <span className="text-paragraph text-[16px] font-light">
                          {locale === "en"
                            ? formatedDate(item?.["created_at"])
                            : formatedDateAr(item?.["created_at"])}
                        </span>
                        <span className="text-dark md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                          {item?.locales?.name}
                        </span>
                        <p className="text-paragraph line-clamp-3 text-[14px] md:text-[16px] font-light">
                          {item?.locales?.["short_description"]}
                        </p>
                      </div>
                      <div className="flex flex-col gap-4 ">
                        <span className="border border-b-1 border-light-stroke "></span>
                        <Link
                          href={`/en/blogs/${item?.slug}`}
                          className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end`}
                        >
                          {t("Read")}
                          <Image
                            src={arrow}
                            alt="arrow"
                            className="object-cover  w-[19px] h-[19px]   lg:w-[24px] lg:h-[24px] "
                          />
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      {posts.length > postsPerPage && posts.length > 0 && (
        <PaginationPages
          postsPerPage={postsPerPage}
          totalPosts={posts.length}
          paginate={paginate}
          currentPage={currentPage}
        />
      )}
    </>
  );
};

export default PaginationMain;