---
import { getPicture } from "@astrojs/image";

const {
  src,
  alt,
  sizes,
  widths,
  aspectRatio = 1,
  formats = ["avif", "webp"],
  loading = "lazy",
  decoding = "async",
  class: className = "",
  ...attrs
} = Astro.props;

// const { image, sources = [] } =
//   !src ? { image: {}}
//     : (typeof src === "string"
//       ? { image: { src } }
//       :

let picture = null;
try {
  picture = await getPicture({
    src,
    widths,
    formats,
    aspectRatio,
  })
}
catch (e) {
  console.log(e);
}

const { image = {}, sources = [] } = picture || {}
---

{ (src && image?.src) &&
<picture {...attrs}>
  {sources.map((attrs) =>
  <source {...attrs} {sizes} />)}
  <img {...image} {loading} {decoding} {alt} class={className} />
</picture>
}

<style>
  img {
    content-visibility: auto;
  }
</style>