---
import type { ImageMetadata } from "astro";
import { Picture as AstroImage } from "astro:assets";
import { generateThumbHash } from "@helpers/image";
interface Props {
  src: ImageMetadata;
  alt: string;
  pictureClass?: string;
  class?: string;
  caption?: string;
  hash?: boolean;
  loader?: boolean;
  maxWidth?: number;
}

const {
  src: image,
  loader = true,
  pictureClass = "",
  hash = true,
  alt,
  maxWidth,
} = Astro.props;

let thumbhash = hash ? await generateThumbHash(image) : "";

const sizes = [
  {
    width: 240,
    media: "(max-width: 360px)",
  },
  {
    width: 540,
    media: "(max-width: 720px)",
  },
  {
    width: 720,
    media: "(max-width: 1600px)",
  },
  {
    width: image.width,
  },
].filter((size) => !maxWidth || size.width <= maxWidth);
---

<AstroImage
  src={image}
  alt={alt}
  data-thumbhash={thumbhash}
  pictureAttributes={{
    class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
  }}
  class={Astro.props.class}
  widths={sizes.map((size) => size.width)}
  sizes={sizes
    .map((size) => `${size.media || "100vw"} ${size.width}px`)
    .join(", ")}
/>
