/* eslint-disable @next/next/no-img-element */
"use client";
import React from "react";
import "../home/homeSlider.scss";
import { useTranslations } from "next-intl";
// import Video from "@/assets/images/home/01.png";
import Image from "next/image";
import ImageWithFallback from "@/shared/ImageWithFallback";
import VideoWithFallback from "@/shared/VideoWithFallback";
type Props = {
  title: string;
  randomIndex: any;
  media: any;
};
function OurInvestmentCard({ title, randomIndex, media }: Props) {
  const t = useTranslations();

  return (
    <>
      <div className="lg:h-screen  h-[80vh] overflow-hidden w-full relative inset-0 z-[1] text-white ">
        <div className=" relative z-40">
          <div className="home-intro">
            <div className="lg:h-screen h-[80vh] lg:kw-[707px] jw-3/4 mx-auto text-center flex pb-14 pr-14 items-end relative">
              <div className="relative z-40">
                <h2
                  data-aos="fade-right"
                  className="my-4 lg:text-6xl leading-10 text-center text-2xl capitalize font-medium "
                >
                  {title}
                </h2>
              </div>
            </div>
            {media[randomIndex]?.includes("images") ? (
              <ImageWithFallback
                width={1000}
                height={1000}
                className=" w-full h-full object-fill absolute top-0 left-0 -z-50"
                src={media[randomIndex]}
                alt={`image `}
              />
            ) : (
              <VideoWithFallback
                width={1000}
                height={1000}
                className=" w-full h-full object-cover absolute top-0 left-0 -z-50"
                src={media[randomIndex]}
                loop
                autoPlay
                muted
                controls={false}
                // alt={`image ${Video}`}
              />
            )}
          </div>
        </div>
      </div>
    </>
  );
}

export default OurInvestmentCard;