export type ClassValue = string | false | null | undefined;

/**
 * 조건부 클래스명을 합친다. falsy 값은 버린다.
 *
 *   cx(styles.button, isActive && styles.active, className)
 *
 * 유틸리티 CSS 프레임워크에서 쓰는 클래스 병합 라이브러리(tailwind-merge 등)가
 * 필요 없는 이유: CSS Module은 클래스명이 파일 단위로 스코프되므로 서로 다른
 * 컴포넌트의 클래스가 같은 속성을 두고 충돌하지 않는다. 한 컴포넌트 안에서의
 * 충돌은 선언 순서(뒤에 온 규칙이 이김)로 결정되며, 이는 CSS의 정상 동작이다.
 */
export function cx(...values: ClassValue[]): string {
  return values.filter(Boolean).join(" ");
}