---
/* 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="border-line-strong bg-surface-2 overflow-hidden rounded-lg border">
    {
      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="text-mono-meta text-ink-faint mt-2 font-mono">{caption}</p>
</div>
