---
import { Image } from 'astro:assets';
interface Props {
  src: string;
  alt: string;
  caption?: string;
}
const { src, alt, caption } = Astro.props;

const images = import.meta.glob<{ default: ImageMetadata }>(
  '/src/content/**/cover/*.{png,jpg,jpeg,webp,avif}',
  { eager: true },
);

const imagePath = `/src${src}`;
const image = images[imagePath]?.default;
---

<figure class="cover">
  {
    image ? (
      <Image
        class="image"
        src={image}
        alt={alt}
        widths={[600, 900, 1280, 1440, 1600, 1920]}
        sizes="100vw"
        loading="lazy"
      />
    ) : (
      <img class="image" src={src} alt={alt} loading="lazy" />
    )
  }
  <figcaption class="caption">
    <div class="wrapper">
      {
        caption ? (
          <span class="caption-text">{caption}</span>
        ) : (
          <span class="caption-meta">{src}</span>
        )
      }
    </div>
  </figcaption>
</figure>

<style>
  .cover {
    @mixin border-t 12px, solid, var(--color-surface-inverse);
  }

  .image {
    width: 100%;
    height: auto;
    max-height: 60vw;
    object-fit: cover;
  }

  .caption {
    padding: var(--space-4);
    color: var(--color-text-inverse);
    background-color: var(--color-surface-inverse);
  }

  .wrapper {
    font-size: var(font-size-responsive);
    text-align: center;
  }

  .caption-text,
  .caption-meta {
    @mixin typo_code;
  }
</style>