type Variant = { src: string; width: number; height: number; format: string };
export function ResponsiveImage({
  variants,
  alt,
  sizes = "(max-width: 760px) 100vw, 50vw",
  priority = false,
}: {
  variants: Variant[];
  alt: string;
  sizes?: string;
  priority?: boolean;
}) {
  const webp = variants.filter((v) => v.format === "webp"),
    avif = variants.filter((v) => v.format === "avif"),
    fallback = webp.at(-1);
  if (!fallback) return null;
  const srcSet = (v: Variant[]) =>
    v.map((i) => `${i.src} ${i.width}w`).join(", ");
  return (
    <picture>
      <source type="image/avif" srcSet={srcSet(avif)} sizes={sizes} />
      <source type="image/webp" srcSet={srcSet(webp)} sizes={sizes} />
      <img
        src={fallback.src}
        width={fallback.width}
        height={fallback.height}
        alt={alt}
        sizes={sizes}
        loading={priority ? "eager" : "lazy"}
        fetchPriority={priority ? "high" : "auto"}
        decoding="async"
      />
    </picture>
  );
}