salar-store/components/SlotImage.tsx

import type { StaticImageWithUrl } from "@/lib/static-images";
import { slotAlt, slotAspectStyle } from "@/lib/static-images";

type Props = {
  image: StaticImageWithUrl;
  alt?: string;
  className?: string;
  imgClassName?: string;
  aspectRatio?: string;
  fallbackAspect?: string;
  fill?: boolean;
};

export function SlotImage({
  image,
  alt,
  className = "",
  imgClassName,
  aspectRatio,
  fallbackAspect,
  fill = false,
}: Props) {
  const style = fill ? undefined : slotAspectStyle(aspectRatio, fallbackAspect);
  const img = (
    // Slot URLs come from Meshkee CDN and may not be in next/image remotePatterns.
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={image.url}
      alt={slotAlt(image, alt)}
      style={style}
      className={
        imgClassName ??
        (fill
          ? "absolute inset-0 h-full w-full object-cover"
          : "h-auto w-full object-cover")
      }
    />
  );

  if (!image.linkUrl) {
    return className ? <div className={className}>{img}</div> : img;
  }

  return (
    <a href={image.linkUrl} className={className || (fill ? "absolute inset-0 block" : "block")}>
      {img}
    </a>
  );
}