---
// figure 块：图片（Astro 图片管线，宽度自适应；caption 图注）
import { Image } from 'astro:assets';
import type { ResolvedBlock } from '../../lib/page-blocks';

interface Props {
  block: Extract<ResolvedBlock, { type: 'figure' }>;
}
const { block } = Astro.props;
---

<figure class="fig">
  <Image
    src={block.image}
    alt={block.alt}
    widths={[480, 960]}
    sizes="(min-width: 820px) 640px, 92vw"
    loading="lazy"
    class="fig-img"
  />
  {block.caption && <figcaption>{block.caption}</figcaption>}
</figure>

<style>
  .fig { margin: var(--space-4) 0; }
  .fig-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--line);
  }
  figcaption {
    margin-top: var(--space-1);
    font-size: 12.5px;
    color: var(--ink-4);
    text-align: center;
  }
</style>