import styles from './merchant-thumbnail.module.scss';

interface MerchantThumbnailProps {
  src: string | null;
  alt: string;
}

/**
 * 목록·메뉴 표의 101×72 썸네일. 이미지가 없어도 같은 크기의 틀에 "no image"를 띄운다 —
 * `-` 한 글자면 열이 들쭉날쭉해지고 이미지 자리가 어디인지 보이지 않는다(사용자 확정).
 */
export function MerchantThumbnail({ src, alt }: MerchantThumbnailProps) {
  if (!src) {
    return (
      <span className={styles.placeholder} role="img" aria-label={`${alt} 없음`}>
        no image
      </span>
    );
  }
  // 백엔드의 공개 이미지 GET이라 브라우저가 직접 부른다. `next/image`는 백엔드 호스트를
  // next.config에 등록해야 해 <img>로 둔다(꾸미기아이템과 같은 판단).
  // eslint-disable-next-line @next/next/no-img-element
  return <img className={styles.image} src={src} alt={alt} />;
}