/* eslint-disable @next/next/no-img-element */
"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 ImageWithFallback from "@/shared/ImageWithFallback";
import VideoWithFallback from "@/shared/VideoWithFallback";
type Props = {
  projects: { data: { data: projects[] }; section: section };
};

export default function OurProjectsMore({ projects }: Props) {
  const t = useTranslations();
  const locale = useLocale();
  return (
    <section className="latest-news container  lg:px-16 px-4 !mb-14">
      <h2 className="capitalize font-semibold text-[40px] text-center leading-[60px] mb-3 ">
        {projects.section.title}
      </h2>
      <h2 className="text-greynormal  text-lg font-medium leading-7 text-center">
        {projects.section.description}
      </h2>

      <div className="grid lg:grid-cols-2 gap-4 mt-6">
        {projects.data.data.map((ele, index: number) => {
          const firstImage = ele?.media?.find((img: string) =>
            img?.includes("images")
          );
          const firstVideo = ele?.media?.find((img: string) =>
            img?.includes("videos")
          );
          return (
            <div className="h-[460px]" key={ele.id} data-aos="flip-right">
              {firstImage ? (
                <ImageWithFallback
                  width={1000}
                  height={1000}
                  className=" w-ful h-[380px] object-cover rounded-lg mb-4"
                  src={firstImage}
                  alt={`image`}
                />
              ) : firstVideo ? (
                <VideoWithFallback
                  width={1000}
                  height={1000}
                  className=" w-ful h-[380px] object-cover rounded-lg mb-4"
                  src={firstVideo}
                  loop
                  // autoPlay
                  muted
                />
              ) : (
                <ImageWithFallback
                  width={1000}
                  height={1000}
                  className=" w-ful h-[380px] object-cover rounded-lg mb-4"
                  src=""
                  alt={`image`}
                />
              )}
              <div className="flex justify-between px-4">
                <p className=" text-2xl leading-7 text-start font-medium">
                  {ele.title}
                </p>
                <LocalePath href={`/our-projects/${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>
      <div className="flex justify-center">
        <LocalePath
          href="/our-projects"
          className=" w-fit 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 more")}
        </LocalePath>
      </div>
    </section>
  );
}