import ProductTileImage from "@/components/ui/ProductTileImage";
import { imageForProduct } from "@/lib/home/images";

type Props = {
  src?: string | null;
  alt: string;
  sizes: string;
  /** Shown when `src` is missing or fails; defaults to a photo of goods like `alt`. */
  fallbackSrc?: string;
};

/**
 * A catalogue photo filling its frame, positioned absolutely — the parent must
 * be `relative` and set the aspect ratio.
 *
 * Catalogue photos are square (2480x2480), so put them in a **square** frame:
 * the photo is contained, filling the frame edge to edge with nothing sliced
 * off. (Earlier 4:3 frames left the photo's own patterned background ending in
 * visible seams at the sides, which a white edge-fade then made look cut off.)
 * With no usable photo, a representative industry photo of the same kind of
 * goods is shown instead of the Biznie logo.
 */
export default function ProductPhoto({ src, alt, sizes, fallbackSrc }: Props) {
  return (
    <ProductTileImage src={src} fallbackSrc={fallbackSrc || imageForProduct(alt)} alt={alt} sizes={sizes} />
  );
}