---
import { Image } from "astro:assets";
import type { ImageMetadata } from "astro";

type ContentSource = ImageMetadata | string;

interface Item {
  src: ContentSource;
  alt: string;
  type?: "image" | "video";
}

interface Props {
  items: Item[];
}

const { items } = Astro.props as Props;

const group1: Item[] = [];
const group2: Item[] = [];

items.forEach((item: Item, index: number) => {
  if (index % 2 === 0) {
    group1.push(item);
  } else {
    group2.push(item);
  }
});
---

<div class="grid grid-cols-2 gap-3">
  <div class="flex flex-col gap-3">
    {
      group1.map((item: Item) => (
        <div class="flex-col overflow-hidden rounded-sm">
          {item.src && item.type === "video" ? (
            <video
              src={item.src as string}
              class="mt-0 mb-0 h-full w-full object-cover"
              muted
              autoplay
              loop
              preload="metadata"
              aria-label={item.alt}
            >
              Your browser does not support the video tag.
            </video>
          ) : (
            <Image
              src={item.src as ImageMetadata}
              alt={item.alt}
              loading="lazy"
              class="mt-0 mb-0 h-full w-full object-cover"
            />
          )}
        </div>
      ))
    }
  </div>

  <div class="flex flex-col gap-3">
    {
      group2.map((item: Item) => (
        <div class="flex-col overflow-hidden rounded-sm">
          {item.src && item.type === "video" ? (
            <video
              src={item.src as string}
              class="mt-0 mb-0 h-full w-full object-cover"
              muted
              autoplay
              loop
              preload="metadata"
              aria-label={item.alt}
            >
              Your browser does not support the video tag.
            </video>
          ) : (
            <Image
              src={item.src as ImageMetadata}
              alt={item.alt}
              loading="lazy"
              class="mt-0 mb-0 h-full w-full object-cover"
            />
          )}
        </div>
      ))
    }
  </div>
</div>
