export interface GalleryItemProps {
  src: string;
  alt: string;
  /** Small muted caption under the square image. */
  caption?: string;
}

/**
 * White rounded tile (`.kwac-gallery-item`, 22px radius, 26px padding) with a
 * square, contained product image and a muted caption. Child of `Gallery`.
 */
export function GalleryItem({ src, alt, caption }: GalleryItemProps) {
  return (
    <figure className="kwac-gallery-item">
      <img src={src} alt={alt} />
      {caption ? <figcaption>{caption}</figcaption> : null}
    </figure>
  );
}