---
import type { ImageMedia } from "./MicroBlog.astro";
import Modal from "./Modal.astro";
import Embed from "./Embed.astro";
import ModalClick from "./ModalClick.astro";
import ModalScript from "./ModalScript.astro";
import type { CacheOptions } from "../cache_fetch/deps/cache";

type Props = CacheOptions & { media: ImageMedia; class?: string };
const { media, class: className, ...rest } = Astro.props;
---

<div
  class={`${className} grid rounded-xl overflow-hidden ${
    media.length === 1 ? "grid-cols-1" : "grid-cols-2"
  } gap-0 ${media.length % 2 !== 0 && media.length !== 1 ? "grid-rows-2" : ""}`}
  style="aspect-ratio: 3 / 2;"
>
  {
    media.map((item, index) => {
      return (
        <div
          class={`overflow-hidden w-full h-full ${
            index === 0 && media.length % 2 !== 0 && media.length !== 1
              ? "col-span-1 row-span-2"
              : ""
          }`}
        >
          <ModalClick id={item.id}>
            <img
              src={item.src}
              alt={item.alt || "Image"}
              class="object-cover w-full h-full"
              style={item.objectPosition}
            />
          </ModalClick>
        </div>
      );
    })
  }
</div>

{
  media &&
    media.map((item) => (
      <Modal id={item.id}>
        <Embed src={item.src} alt={item.alt} {...rest} />
      </Modal>
    ))
}

<ModalScript />