---
import type { ImageMetadata } from 'astro';
import { Picture } from 'astro:assets';

interface Props {
  src: ImageMetadata;
  alt: string;
  href?: string;
  class?: string;
  widths: number[];
  sizes: string;
  loading?: 'lazy' | 'eager';
  fetchpriority?: 'high' | 'low' | 'auto';
  ariaLabel?: string;
  // When the listing already has a focusable, screen-reader-visible title
  // link, the thumbnail link is visually duplicative. We keep it clickable
  // for pointer users but drop it from the tab order. The link still needs
  // a name because some assistive tech exposes non-tabbable links.
  decorative?: boolean;
}

const {
  src,
  alt,
  href,
  class: extraClass,
  widths,
  sizes,
  loading = 'lazy',
  fetchpriority,
  ariaLabel,
  decorative = true,
} = Astro.props;

const Tag = href ? 'a' : 'div';
const isDecorativeLink = Boolean(href) && decorative;
---

<Tag
  class:list={['entry-thumbnail', extraClass]}
  href={href}
  tabindex={isDecorativeLink ? -1 : undefined}
  aria-label={isDecorativeLink ? (ariaLabel ?? alt) : undefined}
>
  <Picture
    src={src}
    alt={isDecorativeLink ? '' : alt}
    formats={['avif', 'webp']}
    fallbackFormat="jpg"
    widths={widths}
    sizes={sizes}
    quality="high"
    loading={loading}
    decoding="async"
    fetchpriority={fetchpriority}
  />
</Tag>