---
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';
}

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

const Tag = href ? 'a' : 'div';
---

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