import { useEffect, useState, type ImgHTMLAttributes, type ReactNode } from "react";
import { cn } from "../../lib/cn";

export type ImageFit = "contain" | "cover" | "fill" | "none" | "scale-down";

export type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "height" | "width"> & {
  aspectRatio?: number | string;
  fallback?: ReactNode;
  fit?: ImageFit;
  frameClassName?: string;
  height?: number | string;
  responsive?: boolean;
  width?: number | string;
};

export function Image({
  alt,
  aspectRatio,
  className,
  fallback,
  fit = "cover",
  frameClassName,
  height,
  onError,
  onLoad,
  responsive = true,
  src,
  style,
  width,
  ...props
}: ImageProps) {
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    setFailed(false);
  }, [src]);

  return (
    <div
      className={cn("relative max-w-full overflow-hidden", frameClassName)}
      style={{ aspectRatio, height, width }}
    >
      {failed ? (
        fallback ?? <div className="grid min-h-24 place-items-center bg-[var(--uhuru-surface-muted)] text-sm text-[var(--uhuru-text-secondary)]">Unable to load image</div>
      ) : (
        <img
          alt={alt}
          className={cn(
            "block",
            responsive ? "h-auto w-full max-w-full" : "max-w-full",
            aspectRatio || height !== undefined ? "h-full" : "",
            className,
          )}
          height={height}
          onError={(event) => {
            setFailed(true);
            onError?.(event);
          }}
          onLoad={onLoad}
          src={src}
          style={{ objectFit: fit, ...style }}
          width={width}
          {...props}
        />
      )}
    </div>
  );
}