import './brand-logo.css';

/** 브랜드 워드마크 노출 컨텍스트 → 크기 규격(brand-logo.css 단일 출처). */
export type BrandLogoSize = 'header' | 'auth' | 'footer' | 'print';

/** 정식 CI 워드마크 경로(단일 출처). 구 자산(kintex-ci.jpg)·텍스트 워드마크는 이 컴포넌트로 대체한다. */
export const KINTEX_WORDMARK = '/brand/kintex-wordmark.jpg';

interface BrandLogoProps {
  /** 노출 컨텍스트 — 크기 규격 결정(header 28 · auth 32 · footer 22 · print 38). */
  size?: BrandLogoSize;
  className?: string;
  alt?: string;
}

/**
 * KINTEX 워드마크 로고 — 전 화면 공용. 크기는 규격 클래스(kx-brandmark--*)로만 통일하고 임의 px 를 쓰지 않는다.
 * AppShell(셸 헤더)은 별도 소유(다른 트랙)이므로 여기서 다루지 않는다.
 */
export function BrandLogo({ size = 'header', className, alt = 'KINTEX' }: BrandLogoProps) {
  const cls = `kx-brandmark kx-brandmark--${size}${className ? ` ${className}` : ''}`;
  return <img className={cls} src={KINTEX_WORDMARK} alt={alt} decoding="async" />;
}
