---
import ContentImage from '@/components/media/ContentImage.astro'
import type { Article } from '@/lib/site/types'

type Props = {
  cover: Article['summary']['cover']
}

const { image, alt, caption, credit, effect, ratio } = Astro.props.cover
---

{image && (
  <figure
    class:list={[
      'article-header__cover',
      effect !== 'none' && `effect--${effect}`,
      ratio !== 'original' && `ratio--${ratio}`,
    ]}
  >
    <ContentImage
      src={image}
      alt={alt}
      widths={[800, 1600, 2400]}
      sizes="(min-width: 80rem) 74rem, 100vw"
      eager
    />
    {(caption || credit) && (
      <figcaption class="article-header__caption dark">
        {caption && <span>{caption}</span>}
        {credit && <span class="article-header__credit">{credit}</span>}
      </figcaption>
    )}
  </figure>
)}