"use client";
import Image from "next/image";
import React from "react";
import { useTranslations } from "next-intl";
import ImageWithFallback from "@/shared/ImageWithFallback";
import VideoWithFallback from "@/shared/VideoWithFallback";

type Media = {
  id: number;
  type: string;
  media: string;
};
type Props = {
  media: string[];
};
export default function OurProjectsMedia({ media }: Props) {
  const t = useTranslations();
  return (
    <div className="container  lg:px-16 px-4 !mb-14">
      <h2 className="my-8  text-4xl font-semibold text-start leading-10">
        {t("events breif mdeias")}
      </h2>
      <div className=" grid lg:grid-cols-2 gap-8">
        {media.map((ele, index: number) => {
          if (ele?.includes("images")) {
            return (
              <ImageWithFallback
                key={index}
                width={720}
                height={1000}
                className=" w-full lg:h-[685px] h-[350px] object-cover rounded-xl"
                src={ele}
                alt={`image `}
                data-aos={`${
                  (index + 1) % 2 == 0 ? "flip-right" : "flip-left"
                }`}
              />
            );
          } else {
            return (
              <VideoWithFallback
                key={index}
                className=" w-full lg:h-[685px] h-[350px] object-cover rounded-xl"
                src={ele}
                loop
                // autoPlay
                muted
                data-aos={`${
                  (index + 1) % 2 == 0 ? "flip-right" : "flip-left"
                }`}
              />
            );
          }
        })}
      </div>
    </div>
  );
}