"use client";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import lastNewsx from "@/public/assets/home/lastNewsx.webp";
import arrow from "@/public/assets/icons/arrow-right.svg";
import arrowleft from "@/public/assets/icons/arrow-left.svg";

import clock from "@/public/assets/icons/clock.svg";
import SectionTitle from "../sectionTitle/SectionTitle";
import { formatedDate, formatedDateAr } from "@/lib/utils";
const LastNewsSection = ({ homeData }: { homeData: any }) => {
  const t = useTranslations("LastNewsSection");
  const blogsHeaders = homeData?.header?.locales;
  const blogsData = homeData?.data;
  const locale = useLocale();

  return (
    <div
      id="lastnews"
      className="container mx-auto flex flex-col gap-12 px-2 md:px-4 lg:px-[50px] xl:!px-[120px] 2xl:p-0"
    >
      <SectionTitle
        //  title={t("Latest News")}
        title={blogsHeaders?.name}
        //  description={t("catch")}
        description={blogsHeaders?.description}
      />
      <div className="grid lg:grid-cols-2 md:grid-cols-1  gap-6 ">
        {blogsData?.map((item: any) => {
          return (
            <div
              key={item?.id}
              className="flex flex-col sm:flex-row shadow-[0px_8px_18px_0px_rgba(156,156,156,0.10)] rounded-2xl p-4 gap-4 w-full  "
              data-aos="fade-up"
              data-aos-duration="1500"
              data-aos-delay="200"
            >
              <div className="w-[223px] h-[223px]  rounded-2xl overflow-hidden flex-shrink-0">
                <Image
                  src={item?.image?.image ?? lastNewsx}
                  alt="lastnews"
                  className="w-full h-full  hover:scale-110 ease-in duration-300"
                  width={223}
                  height={223}
                  loading="lazy"
                  quality={75}
                />
              </div>
              <div className="flex flex-col justify-around gap-2 sm:gap-5 md:gap-8 lg:gap-4 2xl:gap-6">
                <div className="flex flex-col gap-1">
                  <div className="flex items-center gap-2">
                    <div>
                      <Image src={clock} alt="clock" />
                    </div>
                    {locale === "en" && (
                      <span className="text-paragraph text-[10px] sm:text-[13px] lg:text-[16px] font-light">
                        {/* {t("4 Hours Ago")} */}
                        {formatedDate(item?.created_at)}
                      </span>
                    )}
                    {locale === "ar" && (
                      <span className="text-paragraph text-[10px] sm:text-[13px] lg:text-[16px] font-light">
                        {/* {t("4 Hours Ago")} */}
                        {formatedDateAr(item?.created_at)}
                      </span>
                    )}
                  </div>
                  <span className="text-dark text-[11px] sm:text-[16px] md:text-[20px]  2xl:text-[22px] font-normal">
                    {/* {t("royal")} */}
                    {item?.locales?.name}
                  </span>
                </div>

                <div
                  className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1  `}
                >
                  <Link href={`/${locale}/blogs/${item?.slug}`}>
                    {" "}
                    {t("read more")}
                  </Link>
                  <Image
                    src={arrow}
                    alt="arrow"
                    className={`object-cover w-[19px] h-[19px] lg:w-[24px] lg:h-[24px] transition-transform duration-300 ${
                      locale === "ar" ? "rotate-180" : ""
                    }`}
                  />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default LastNewsSection;