---
import type { CollectionEntry } from 'astro:content';
import PostMediaFigure from './PostMediaFigure.astro';

type MediaItem = CollectionEntry<'posts'>['data']['media'][number];

interface Props {
  items: MediaItem[];
}

const { items } = Astro.props;

// Wrap in a gallery `<ul>` when there's more than one item; otherwise the
// figures sit directly in the post flow.
const isGallery = items.length > 1;
---

{
  isGallery ? (
    <ul role="list" class="post-gallery">
      {items.map((item) => (
        <li>
          <PostMediaFigure item={item} />
        </li>
      ))}
    </ul>
  ) : (
    items.map((item) => <PostMediaFigure item={item} />)
  )
}