"use client";
import { useLocale, useTranslations } from "next-intl";
import React from "react";
import LocalePath from "@/shared/LocalePath";
import { FaArrowLeft } from "react-icons/fa";
import { projects, section } from "@/interfaces/types";
import { usePathname, useRouter } from "next/navigation";
import ImageWithFallback from "@/shared/ImageWithFallback";
import CustomPagination from "@/shared/Pagination/CustomPagination";
import { updateURLParams } from "@/utils/helpers";
import VideoWithFallback from "@/shared/VideoWithFallback";

type Props = {
  investments: { data: projects[]; section: section };
  pagination: any;
  current_page: any;
};
export default function OurInvestmentsDetails({
  investments,
  pagination,
  current_page,
}: Props) {
  console.log("🚀 ~ pagination:", pagination);
  const t = useTranslations();
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const currentItems = investments.data;
  const handlePaggination = (selectedPage: any) => {
    updateURLParams({ page: selectedPage }, router, pathname);
  };

  return (
    <section className="latest-news container  lg:px-16 px-4 mb-8 py-8">
      <h2 className="capitalize font-semibold text-[40px] text-center leading-[60px] mb-3 animate__animated animate__heartBeat">
        {investments.section.title}
      </h2>
      <h2 className="text-greynormal  text-lg font-medium leading-7 text-center animate__animated animate__heartBeat">
        {investments.section.description}
      </h2>

      <div className="grid lg:grid-cols-2 gap-4 mt-6">
        {currentItems.length > 0 &&
          currentItems.map((ele) => {
            return (
              <div className="h-[460px]" data-aos="flip-right" key={ele.id}>
                {ele.media[0]?.includes("images") ? (
                  <ImageWithFallback
                    width={1000}
                    height={1000}
                    className=" w-ful h-[380px] object-cover rounded-lg mb-4"
                    src={ele.media[0]}
                    alt={`image`}
                  />
                ) : (
                  <VideoWithFallback
                    width={1000}
                    height={1000}
                    className=" w-ful h-[380px] object-cover rounded-lg mb-4"
                    src={ele.media[0]}
                    loop
                    // autoPlay
                    muted
                  />
                )}
                <div className="flex justify-between px-4">
                  <p className=" text-2xl leading-7 text-start font-medium">
                    {ele.title}
                  </p>
                  <LocalePath href={`/our-investments/${ele.id}`}>
                    <FaArrowLeft
                      className={`text-primary border-[1px] border-primary p-2 rounded-full ${
                        locale == "ar" ? "rotate-45" : "rotate-[135deg]"
                      }`}
                      size={40}
                    />
                  </LocalePath>
                </div>
              </div>
            );
          })}
      </div>

      {/* {investments?.data && investments?.data.length > 0 && (
        <div className="py-8">
          <CustomPagination
            itemsPerPage={pagination?.per_page}
            totalItems={pagination?.total}
            totalPage={pagination?.last_page}
            currentPage={+current_page}
            paginate={handlePaggination}
          />
        </div>
      )} */}
      <div className="flex justify-center">
        {/* <LocalePath
          href="/our-projects"
          className=" w-fit  text-base font-normal leading-5 text-center bg-white hover:bg-thirdy transition-colors  whitespace-nowrap text-primary border-[1px] border-primary  hover:border-thirdy px-10 py-2 rounded-full mt-3 sm:mt-0"
        >
          {t("Show moree")}
        </LocalePath> */}
      </div>
    </section>
  );
}