import Image from "next/image";
import React from "react";

type Props = {
  readonly className?: string;
  readonly src: string;
  readonly alt: string;
  readonly env?: string;
  readonly id?: string;
  readonly sizes?: string;
};

const customLoader = ({ src }: { src: string }) => {
  return `${src}`; // Keep original URL
};

export const ImageElement = ({ className, src, alt, id, env, sizes }: Props) => {
  return env === "enlume_next" ? (
    <Image
      className={className}
      loader={customLoader} // Custom loader to bypass _next/image
      src={src}
      alt={alt}
      id={id}
      sizes={sizes}
      fetchPriority="high"
    />
  ) : (
    <img className={className} src={src} alt={alt} id={id} fetchPriority="high" />
  );
};