"use client";
import { useMemo } from "react";

type Props = React.ImgHTMLAttributes<HTMLImageElement> & {
  mediaSizes?: Record<string, { width: number | null; height: number | null }>;
};

export default function Image({ src, alt = "", mediaSizes, width, height, loading, ...rest }: Props) {
  const resolved = useMemo(() => {
    if (width != null && height != null) return { width, height };
    if (typeof src !== "string" || !mediaSizes) return { width: undefined, height: undefined };
    const hit = mediaSizes[src];
    if (hit) return { width: hit.width ?? undefined, height: hit.height ?? undefined };
    const filename = src.split("/").pop()?.split("?")[0] || "";
    const sf = mediaSizes[filename];
    return { width: sf?.width ?? undefined, height: sf?.height ?? undefined };
  }, [src, mediaSizes, width, height]);

  if (!src) return null;
  return <img src={src as string} alt={alt} decoding="async" loading={loading || "lazy"} width={resolved.width} height={resolved.height} {...rest} />;
}