import { clsx, type ClassValue } from 'clsx'
import { extendTailwindMerge } from 'tailwind-merge'

/**
 * 커스텀 typography 토큰을 font-size 그룹으로 등록.
 * 등록하지 않으면 twMerge가 text-caption / text-body-sm 등을 font-color 와
 * 같은 그룹으로 잘못 묶어서 text-white 가 사라지는 문제가 생김.
 */
const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': [
        'text-caption',
        'text-body-sm',
        'text-body-md',
        'text-body-lg',
        'text-h1',
        'text-h2',
        'text-h3',
        'text-display-sm',
        'text-display-md',
        'text-display-lg',
      ],
    },
  },
})

/**
 * Tailwind CSS 클래스와 clsx 를 조합하여 동적으로 클래스명 처리
 * - 중복된 클래스 자동 병합 (tailwind-merge)
 * - 조건부 클래스 적용 (clsx)
 */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}