---
import type { ImageMetadata } from "astro";
import { Image } from "astro:assets";

// Props interface for the component
interface Props {
  src: string;
  alt: string;
  width: number;
  height: number;
  loading?: "eager" | "lazy" | null | undefined;
  decoding?: "async" | "auto" | "sync" | null | undefined;
  fetchpriority?: "high" | "low" | "auto" | null | undefined;
  format?: "auto" | "avif" | "jpeg" | "png" | "svg" | "webp";
  class?: string;
  style?: any;
}

// Destructuring Astro.props to get the component's props
let {
  src,
  alt,
  width,
  height,
  loading,
  decoding,
  fetchpriority,
  class: className,
  format,
  style,
} = Astro.props;



const images = import.meta.glob("src/assets/*.{jpeg,jpg,png,gif,svg,webp}");

// Check if the source path is valid
const isValidPath = images[src] ? true : false;


!isValidPath &&
  console.error(
    `\x1b[31mImage not found - ${src}.\x1b[0m Make sure the image is in the /src/assets folder.`,
  );


---

{
  isValidPath && (
    <Image
      src={images[src]() as Promise<{ default: ImageMetadata }>}
      alt={alt}
      width={width}
      height={height}
      loading={loading}
      decoding={decoding}
      fetchpriority={fetchpriority}
      class={className}
      format={format}
      style={style}
    />
  )
}