---
const {
  image,
  alt,
  short = false,
  widths = [800, 1400],
  sizes = '100vw',
  priority = false,
} = Astro.props;

const largest = widths[widths.length - 1];
const srcset = widths.map(w => `/images/${image}-${w}.jpg ${w}w`).join(', ');
---
<div class:list={['hero', short && 'hero--short']}>
  <img
    src={`/images/${image}-${largest}.jpg`}
    srcset={srcset}
    sizes={sizes}
    alt={alt}
    loading={priority ? 'eager' : 'lazy'}
    fetchpriority={priority ? 'high' : 'auto'}
    decoding="async"
  />
  <div class="hero__in">
    <slot />
  </div>
</div>