---
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;
  format?: "auto" | "avif" | "jpeg" | "png" | "svg" | "webp";
  fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
  class?: string;
  style?: any;
}

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

src = `/public${src}`;

// Glob pattern to load images from the /public/images folder
const images = import.meta.glob("/public/images/**/*.{jpeg,jpg,png,gif,svg}");

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

// Log a warning message in red if the image is not found
!isValidPath &&
  console.error(
    `\x1b[31mImage not found - ${src}.\x1b[0m Make sure the image is in the /public/images folder.`,
  );
---

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