"use client";
import Image from "next/image";
import React from "react";
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 OurInvestmentMedia({ media }: Props) {
  return (
    <div className="container  lg:px-16 px-4 !mb-14 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"}`}
            />
          );
        }
      })}
      {/* {media.map((ele, index: number) => {
        if (ele.type == "image") {
          return (
            <ImageWithFallback
              key={index}
              width={720}
              height={1000}
              className=" w-full lg:h-[685px] h-[350px] object-cover rounded-xl"
              src={ele.media}
              alt={`image `}
              data-aos={`${(index + 1) % 2 == 0 ? "flip-right" : "flip-left"}`}
            />
          );
        } else {
          return (
            <video
              key={index}
              className=" w-full lg:h-[685px] h-[350px] object-cover rounded-xl"
              src={ele.media}
              //   type="video"
              autoPlay={true}
              loop={true}
              muted={true}
              data-aos={`${(index + 1) % 2 == 0 ? "flip-right" : "flip-left"}`}
            >
              Your browser does not support the video tag.
            </video>
          );
        }
      })} */}

      {/* <ImageWithFallback
        width={720}
        height={1000}
        className=" w-full h-[685px] object-cover rounded-xl"
        src={Photo}
        alt={`image `}
      />
      <ImageWithFallback
        width={720}
        height={1000}
        className=" w-full h-[685px] object-cover rounded-xl"
        src={Photo}
        alt={`image `}
      />
      <div>
        <ImageWithFallback
          width={720}
          height={1000}
          className=" w-full h-[326px] object-cover rounded-xl mb-8"
          src={Photo}
          alt={`image `}
        />
        <ImageWithFallback
          width={720}
          height={1000}
          className=" w-full h-[326px] object-cover rounded-xl"
          src={Photo}
          alt={`image `}
        />
      </div>
      <ImageWithFallback
        width={720}
        height={1000}
        className=" w-full h-[685px] object-cover rounded-xl"
        src={Photo}
        alt={`image `}
      /> */}
    </div>
  );
}