---
import { type UnresolvedImageTransform } from "astro";
import type { HTMLTag } from "astro/types";
import { getImage } from "astro:assets";

type Props = UnresolvedImageTransform & {
  tag?: HTMLTag;
  id?: string;
  class?: string;
};

const { tag: Tag = "span", id, class: className, ...transform } = Astro.props;
const {
  src,
  options: { width, height },
} = await getImage({ format: "jpeg", ...transform });
---

<style>
  .image {
    background-size: contain;
    background-position: center;
  }
</style>

<Tag
  id={id}
  class:list={["image", className]}
  style={{
    aspectRatio: width && height ? width / height : undefined,
    backgroundImage: `url(${JSON.stringify(src)})`,
  }}
/>