import type React from "react";
import type { RefAttributes } from "react";
import classNames from "classnames/dedupe";
import type { DOMProps } from "../../types/dom";

export type IntrinsicImage = Omit<
  React.JSX.IntrinsicElements["img"],
  "css" | "width" | "height" | "color"
> &
  RefAttributes<HTMLImageElement>;

export interface ImageProps extends DOMProps, IntrinsicImage {
  /** HTML element for the Box */
  elementType?: React.ElementType;
  /** Alternative text for accessibility */
  alt: string;
  /** Path to image asset */
  src: string;
  /** Custom class name for setting specific CSS */
  className?: string;
}

const Image = ({
  ref,
  alt,
  elementType: Component = "img",
  ...otherProps
}: ImageProps) => {
  const classes = classNames("mobius", "mobius-image", otherProps.className);

  return <Component alt={alt} ref={ref} {...otherProps} className={classes} />;
};

Image.displayName = "Image";
export { Image };
