/**
 * 메뉴 아이콘 이름(백엔드가 주는 문자열) → `fox-ico` 클래스.
 *
 * 백엔드는 `users-three`처럼 kebab-case로 주고 폰트 클래스는 시안 이름 그대로인
 * `fox-ico-UsersThree`라서 여기서 변환만 한다. 화이트리스트가 필요 없다 — 폰트는 통째로
 * 하나라 어떤 이름이 와도 번들이 커지지 않는다.
 *
 * 다만 없는 이름이면 글리프가 비어 보이므로, 시안 1depth 세트에 있는 이름만 통과시키고
 * 나머지는 기본 아이콘으로 떨어뜨린다.
 */

/** 시안 1depth가 쓰는 세트. 백엔드가 새 이름을 보내면 여기에 한 줄 추가한다. */
const KNOWN = new Set([
  'house',
  'users-three',
  'user-square',
  'potted-plant',
  'pencil-simple',
  'medal',
  'identification-card',
  'image',
  'calendar-star',
  'coins',
  'nut',
  'shield-check',
  'phone-call',
  'chart-bar',
  'wrench',
]);

/** 모르는 이름이 왔을 때. 메뉴가 통째로 사라지는 것보다 낫다. */
const FALLBACK = 'SquaresFour';

function toPascalCase(name: string): string {
  return name
    .split('-')
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join('');
}

interface SidebarMenuIconProps {
  name: string;
}

/** 시안 1depth 아이콘은 Fill 굵기다. */
export function SidebarMenuIcon({ name }: SidebarMenuIconProps) {
  const glyph = KNOWN.has(name) ? toPascalCase(name) : FALLBACK;
  return (
    <i className={`fox-ico fox-ico--fill fox-ico-${glyph}`} aria-hidden="true" />
  );
}