---
const { image, alt, widths, caption = null, sizes = '(max-width: 860px) 100vw, 1160px' } = Astro.props;
const largest = widths[widths.length - 1];
const srcset = widths.map(w => `/images/${image}-${w}.jpg ${w}w`).join(', ');
---
<figure class="fig">
  <img
    src={`/images/${image}-${largest}.jpg`}
    srcset={srcset}
    sizes={sizes}
    alt={alt}
    loading="lazy"
    decoding="async"
  />
  {caption && <figcaption>{caption}</figcaption>}
</figure>