---
/* Framed portrait, placeholder-aware. Real headshot drops into the same content ref. */
interface Props {
  src: string;
  alt: string;
  caption: string;
  class?: string;
}
const { src, alt, caption, class: cls } = Astro.props;
const isPlaceholder = src.startsWith('placeholder:');
---

<div class:list={['mx-auto max-w-sm', cls]}>
  <div class="overflow-hidden rounded-lg border border-line-strong bg-surface-2">
    {
      isPlaceholder ? (
        <div class="dot-grid flex aspect-[4/5] items-center justify-center">
          <span class="mono-meta text-ink-faint">[ portrait ]</span>
        </div>
      ) : (
        <img src={src} alt={alt} width="800" height="1000" class="aspect-[4/5] w-full object-cover" />
      )
    }
  </div>
  <p class="mt-2 font-mono text-mono-meta text-ink-faint">{caption}</p>
</div>
