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

type FallbackFormat = 'jpg' | 'jpeg' | 'png' | 'webp' | 'avif' | 'gif';

interface Props {
  src: ImageMetadata;
  alt: string;
  href?: string;
  class?: string;
  widths: number[];
  sizes: string;
  loading?: 'lazy' | 'eager';
  fetchpriority?: 'high' | 'low' | 'auto';
  decorative?: boolean;
  fallbackFormat?: FallbackFormat;
}

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

const Tag = href ? 'a' : 'div';
// Listing thumbnails are screenshots with no required transparency; force JPG
// fallback to avoid shipping multi-hundred-KB PNG derivatives.
const resolvedFallback: FallbackFormat = fallbackFormat ?? 'jpg';
const isDecorativeLink = Boolean(href) && decorative;
---

<Tag
  class:list={['entry-thumbnail', extraClass]}
  href={href}
  aria-hidden={isDecorativeLink ? 'true' : undefined}
  tabindex={isDecorativeLink ? -1 : undefined}
>
  <Picture
    src={src}
    alt={alt}
    formats={['avif', 'webp']}
    fallbackFormat={resolvedFallback}
    widths={widths}
    sizes={sizes}
    loading={loading}
    decoding="async"
    fetchpriority={fetchpriority}
  />
</Tag>
