---
/*
  Screenshot in a browser-chrome frame (DESIGN_SYSTEM §5). Aspect-locked to prevent
  layout shift (CLS 0). `placeholder:` sources render a styled skeleton until the real
  capture lands (Phase 1/2 seeded-data capture prerequisite); real images are lazy and
  become lightbox targets (bound by lightbox.ts via data-lightbox).
*/
interface Media {
  src: string;
  width: number;
  height: number;
  alt: string;
  caption: string;
}
interface Props {
  media: Media;
  priority?: boolean;
  index?: number;
  url?: string;
  class?: string;
  /** When true, never render the lightbox button (e.g. inside a card that is itself a link). */
  noZoom?: boolean;
}
const { media, priority = false, index, url, class: cls, noZoom = false } = Astro.props;
const isPlaceholder = media.src.startsWith('placeholder:');
const zoomable = !isPlaceholder && !noZoom && index !== undefined;
const ratio = `${media.width} / ${media.height}`;
---

<figure class:list={['overflow-hidden rounded-lg border border-line bg-surface-2', cls]}>
  {/* Browser chrome */}
  <div class="flex items-center gap-2 border-b border-line bg-surface-1 px-4 py-2.5">
    <span class="h-2.5 w-2.5 rounded-full bg-ink-faint"></span>
    <span class="h-2.5 w-2.5 rounded-full bg-ink-faint"></span>
    <span class="h-2.5 w-2.5 rounded-full bg-ink-faint"></span>
    {
      url && (
        <span class="mx-auto rounded-full bg-surface-2 px-4 py-0.5 font-mono text-[11px] text-ink-faint">
          {url}
        </span>
      )
    }
  </div>

  {
    isPlaceholder ? (
      <div class="dot-grid flex items-center justify-center px-6 text-center" style={`aspect-ratio:${ratio}`}>
        <span class="mono-meta max-w-sm text-ink-faint">{media.caption}</span>
      </div>
    ) : !zoomable ? (
      <img
        src={media.src}
        width={media.width}
        height={media.height}
        alt={media.alt}
        loading={priority ? 'eager' : 'lazy'}
        decoding="async"
        style={`aspect-ratio:${ratio}`}
        class="w-full"
      />
    ) : (
      <button
        type="button"
        class="block w-full cursor-zoom-in"
        data-lightbox={index}
        data-lightbox-src={media.src}
        data-lightbox-caption={media.caption}
        aria-label={media.alt}
      >
        <img
          src={media.src}
          width={media.width}
          height={media.height}
          alt={media.alt}
          loading={priority ? 'eager' : 'lazy'}
          decoding="async"
          style={`aspect-ratio:${ratio}`}
          class="w-full"
        />
      </button>
    )
  }
  <figcaption class="sr-only">{media.alt}</figcaption>
</figure>
