---
import { Image } from 'astro:assets';

interface Props {
  src: string;
  alt: string;
  caption?: string;
  credit?: string;
}

const { src, alt, caption, credit } = Astro.props;

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

const imagePath = `/src${src}`;

const image = images[imagePath]?.default;
---

<figure class="wrapper">
  {image ? (
    <Image src={image} alt={alt} loading="lazy" />
  ) : (
    <img src={src} alt={alt} loading="lazy" />
  )}
  {(caption || credit) && (
    <figcaption class="container">
      {caption && <span class="caption">{caption}</span>}
      {credit && <cite class="credit">{credit}</cite>}
    </figcaption>
  )}
</figure>

<style>
  .wrapper {
    @mixin border-x var(--size-6), solid, var(--color-surface-inverse);
  }

  .container {
    padding: var(--space-4);
    background-color: var(--color-surface-inverse);

    & .caption {
      @mixin typo_code;

      display: block;
      color: var(--color-text-inverse);
      text-align: center;
    }

    & .credit {
      @mixin typo_fine;

      display: block;
      color: var(--color-palette-stone);
      text-align: right;
    }
  }
</style>
