// import Image from "next/image";
// import future from "@/public/assets/blog/blog-future.svg";
// import arrow from "@/public/assets/icons/arrow-right.svg";
// import Link from "next/link";
// import { formatedDate } from "@/lib/utils";

import Container from "@/components/reusableComponent/Container";
import { getBlogData, getBlogDataHeaders } from "@/lib/serverActions";
import { getTranslations } from "next-intl/server";
import SectionTitle from "@/components/sectionTitle/SectionTitle";
import { Metadata } from "next";
import PaginationMain from "@/components/pagination/PaginationMain";

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("seo.blog");
  return {
    title: t("title"),
    description: t("description"),
    keywords: t("keywords"),
  };
}

export default async function BlogsPage({ params }: any) {
  const { locale } = await params;
  const t = await getTranslations("blogss");
  const data = await getBlogData(locale);

  const headersData = await getBlogDataHeaders(locale);
  const titleBlogs = headersData?.data?.headers?.["blogs-page"]?.locales;
   const dataArray = data?.data?.data;

  return (
    <Container className=" mt-[50px] flex flex-col gap-12 !py-0 md:!py-0 mb-[120px]">
      <SectionTitle
        title={titleBlogs?.name || ""}
        description={titleBlogs?.description || ""}
      />
      {/* ------------------ 1 blog -------------------- */}
      {/* {dataArray?.length ===1 && (
         
         <div
           className="flex w-1/2
                  shadow-[-4px_4px_35px_0px_rgba(0,_0,_0,_0.1)]  rounded-2xl 
                  "
         >
           <div className="flex-col w-[47%] min-w-[283px]">
             <Image
               src={dataArray[1]?.image?.image}
               alt="img1"
               className="object-cover w-[283px] h-[282px] rounded-tl-[12px] rounded-bl-[12px]"
               width={500}
               height={500}
             />
           </div>

           <div className="flex flex-col p-4 gap-[40px] md:gap-[70px] xl:gap-[60px]">
             <div className="flex flex-col gap-2">
               <span className="text-paragraph text-[16px] font-light">
                 11 February 2025
               </span>
               <span className="text-dark text-[14px] md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                 {dataArray[1]?.locales?.name}
               </span>
               <p className="text-paragraph line-clamp-3 text-[16px] font-light">
                 {dataArray[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/${dataArray[1]?.slug}`}
                 className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end`}
               >
                 Read Blog
                 <Image
                   src={arrow}
                   alt="arrow"
                   className="object-cover  w-[19px] h-[19px]   lg:w-[24px] lg:h-[24px] "
                 />
               </Link>
             </div>
           </div>
         </div>
         
    
     
      )}  */}
      {/* ------------------ 2 blogs -------------------- */}
      {/* {dataArray?.length ===2 && (
        
         <div className="flex  gap-6 justify-between ">
         <div
           className="flex
                  shadow-[-4px_4px_35px_0px_rgba(0,_0,_0,_0.1)]  rounded-2xl
                  "
         >
           <div className="flex-col w-[47%] min-w-[283px]">
             <Image
               src={dataArray[1]?.image?.image}
               alt="img1"
               className="object-cover w-[283px] h-[282px] rounded-tl-[12px] rounded-bl-[12px]"
               width={500}
               height={500}
             />
           </div>

           <div className="flex flex-col p-4 gap-[40px] md:gap-[70px] xl:gap-[60px]">
             <div className="flex flex-col gap-2">
               <span className="text-paragraph text-[16px] font-light">
                 11 February 2025
               </span>
               <span className="text-dark md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                 {dataArray[1]?.locales?.name}
               </span>
               <p className="text-paragraph line-clamp-3 text-[16px] font-light">
                 {dataArray[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/${dataArray[1]?.slug}`}
                 className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end`}
               >
                 Read Blog
                 <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
                  shadow-[-4px_4px_35px_0px_rgba(0,_0,_0,_0.1)]  rounded-2xl
                  "
         >
           <div className="flex-col w-[47%] min-w-[283px]">
             <Image
               src={dataArray[2]?.image?.image}
               alt="img1"
               className="object-cover w-full h-[282px] rounded-tl-[12px] rounded-bl-[12px]"
               width={500}
               height={500}
             />
           </div>

           <div className="flex flex-col p-4 gap-[40px] md:gap-[70px] xl:gap-[60px]">
             <div className="flex flex-col gap-2">
               <span className="text-paragraph text-[16px] font-light">
                 11 February 2025
               </span>
               <span className="text-dark md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                 {dataArray[2]?.locales?.name}
               </span>
               <p className="text-paragraph line-clamp-3 text-[16px] font-light">
                 {dataArray[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/${dataArray[2]?.slug}`}
                 className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end`}
               >
                 Read Blog
                 <Image
                   src={arrow}
                   alt="arrow"
                   className="object-cover  w-[19px] h-[19px]   lg:w-[24px] lg:h-[24px] "
                 />
               </Link>
             </div>
           </div>
         </div>
       </div>
     
      )}  */}
      {/*------------------- 3 blogs -------------------- */}
      {/* {dataArray?.length === 3 && (
          <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 md:w-[283px] h-[590px]
                       "
                >
                  <Image
                    src={dataArray[0]?.image?.image}
                    alt="img1"
                    className="object-cover w-full h-[52%] rounded-tl-[12px] rounded-tr-[12px]"
                    width={500}
                    height={500}
                  />
                  <div className="flex flex-col p-4  2xl:gap-[80px] ">
                    <div className="flex flex-col gap-1">
                      <span className="text-paragraph text-[16px] font-light">
                        11 February 2025
                      </span>
                      <span className="text-dark text-[20px] font-normal">
                        {dataArray[0]?.locales?.name}
                      </span>
                      <p className="text-paragraph text-[16px] font-light">
                        {dataArray[0]?.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/${dataArray[0]?.slug}`}
                        className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end `}
                      >
                        Read Blog
                        <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>
            <div className="flex flex-col gap-6 justify-between ">
              <div
                className="flex
                       shadow-[-4px_4px_35px_0px_rgba(0,_0,_0,_0.1)]  rounded-2xl
                       "
              >
                <div className="flex-col w-[47%] min-w-[283px]">
                  <Image
                    src={dataArray[1]?.image?.image}
                    alt="img1"
                    className="object-cover w-[283px] h-[282px] rounded-tl-[12px] rounded-bl-[12px]"
                    width={500}
                    height={500}
                  />
                </div>

                <div className="flex flex-col p-4 gap-[40px] md:gap-[70px] xl:gap-[60px]">
                  <div className="flex flex-col gap-2">
                    <span className="text-paragraph text-[16px] font-light">
                      11 February 2025
                    </span>
                    <span className="text-dark md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                      {dataArray[1]?.locales?.name}
                    </span>
                    <p className="text-paragraph line-clamp-3 text-[16px] font-light">
                      {dataArray[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/${dataArray[1]?.slug}`}
                      className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end`}
                    >
                      Read Blog
                      <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
                       shadow-[-4px_4px_35px_0px_rgba(0,_0,_0,_0.1)]  rounded-2xl
                       "
              >
                <div className="flex-col w-[47%] min-w-[283px]">
                  <Image
                    src={dataArray[2]?.image?.image}
                    alt="img1"
                    className="object-cover w-full h-[282px] rounded-tl-[12px] rounded-bl-[12px]"
                    width={500}
                    height={500}
                  />
                </div>

                <div className="flex flex-col p-4 gap-[40px] md:gap-[70px] xl:gap-[60px]">
                  <div className="flex flex-col gap-2">
                    <span className="text-paragraph text-[16px] font-light">
                      11 February 2025
                    </span>
                    <span className="text-dark md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                      {dataArray[2]?.locales?.name}
                    </span>
                    <p className="text-paragraph line-clamp-3 text-[16px] font-light">
                      {dataArray[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/${dataArray[2]?.slug}`}
                      className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1 rtl:flex-row-reverse justify-end`}
                    >
                      Read Blog
                      <Image
                        src={arrow}
                        alt="arrow"
                        className="object-cover  w-[19px] h-[19px]   lg:w-[24px] lg:h-[24px] "
                      />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}  */}

      {/* ------------------more blogs------------------- */}
      {/* <div className="flex flex-col gap-6 ">
        {dataArray?.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
                       "
                >
                  <Image
                    src={dataArray[0]?.image?.image}
                    alt="img1"
                    className="object-cover w-full h-[52%] rounded-tl-[12px] rounded-tr-[12px] hover:scale-105 transition duration-500 ease-in-out"
                    width={1000}
                    height={1000}
                  />
                  <div className="flex flex-col p-4 gap-[30px] md:gap-[80px] xl:gap-[70px] 2xl:gap-[80px] ">
                    <div className="flex flex-col gap-1">
                      <span className="text-paragraph text-[16px] font-light">
                                {locale === "en" ? formatedDate(dataArray[0]?.["created_at"]) : formatedDateAr(dataArray[0]?.["created_at"])}
                                
                          </span>
                      <span className="text-dark text-[20px] font-normal">
                        {dataArray[0]?.locales?.name}
                      </span>
                      <p className="text-paragraph text-[14px] md:text-[16px] font-light">
                        {dataArray[0]?.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/${dataArray[0]?.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] "
                          width={24}
                          height={24}
                        />
                      </Link>
                    </div>
                  </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]">
                  <Image
                    src={dataArray[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(dataArray[1]?.["created_at"]) : formatedDateAr(dataArray[1]?.["created_at"])}
                    </span>
                    <span className="text-dark  md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                      {dataArray[1]?.locales?.name}
                    </span>
                    <p className="text-paragraph line-clamp-3 text-[14px] md:text-[16px] font-light">
                      {dataArray[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/${dataArray[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]">
                  <Image
                    src={dataArray[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(dataArray[2]?.["created_at"]) : formatedDateAr(dataArray[2]?.["created_at"])}
                    </span>
                    <span className="text-dark md:text-[18px] lg:text-[20px] font-normal line-clamp-1">
                      {dataArray[2]?.locales?.name}
                    </span>
                    <p className="text-paragraph line-clamp-3 text-[14px] md:text-[16px] font-light">
                      {dataArray[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/${dataArray[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">
          {dataArray?.slice(4)?.map((item) => {
           
            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]">
                    <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> */}

      {/* ----------------------------------------------- */}

      <PaginationMain data={data} locale={locale} />
    </Container>
  );
}