"use client";

import { forwardRef } from "react";

import type { ImageProps } from "@shared/components/image/types";
import { cx } from "@shared/utils";

export const Image = forwardRef<HTMLImageElement, ImageProps>(
  ({ as: ImageComponent, className = "", ...rest }, ref) => {
    const combinedClassName = cx(className);

    if (ImageComponent) {
      // Cast to any to allow ref forwarding for custom components
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const Component = ImageComponent as any;
      return <Component ref={ref} className={combinedClassName} {...rest} />;
    }

    return <img ref={ref} className={combinedClassName} {...rest} />;
  }
);

Image.displayName = "Image";

export type { ImageProps, ImageComponentProps } from "./types";