interface TryOnFigureProps {
  /** The render. */
  image: string;
  /** The garment, shown as a thumbnail on the render. Absent on old items. */
  garmentImage?: string;
  alt: string;
  garmentAlt: string;
  /** Drives the size of both the render and the thumbnail sitting on it. */
  variant?: 'result' | 'gallery';
}

/**
 * A try-on render with the garment tucked into its bottom-right corner, so
 * the shopper can judge how faithful the result is without leaving the image.
 * Shared by the fresh result and the gallery: same component, same corner.
 */
export function TryOnFigure({
  image,
  garmentImage,
  alt,
  garmentAlt,
  variant = 'result',
}: TryOnFigureProps) {
  return (
    <div className={`aisthetix-tryon-figure aisthetix-tryon-figure--${variant}`}>
      <img src={image} alt={alt} className="aisthetix-tryon-figure-image ph-no-capture" />
      {garmentImage && (
        <img
          src={garmentImage}
          alt={garmentAlt}
          className="aisthetix-tryon-figure-pip ph-no-capture"
          loading="lazy"
        />
      )}
    </div>
  );
}