---
// <img> for a /public image path, upgraded to <picture> with AVIF/WebP srcsets when
// scripts/optimize-images.mjs has variants for it. The original stays as the <img> fallback.
// `sizes` should describe the rendered width so phones fetch a phone-sized file.
import type { HTMLAttributes } from "astro/types";
import { imageVariants } from "@utils/images.mjs";

type Props = Omit<HTMLAttributes<"img">, "src" | "srcset" | "sizes"> & {
  src: string;
  sizes?: string;
};

const { src, sizes = "100vw", width, height, ...attrs } = Astro.props;
const variants = imageVariants(src);
---

{
  variants ? (
    <picture>
      <source type="image/avif" srcset={variants.avif} sizes={sizes} />
      <source type="image/webp" srcset={variants.webp} sizes={sizes} />
      <img src={src} width={width ?? variants.width} height={height ?? variants.height} decoding="async" {...attrs} />
    </picture>
  ) : (
    <img src={src} width={width} height={height} {...attrs} />
  )
}