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

/**
 * Tailwind class merger — combines clsx (conditional classes) + tailwind-merge
 * (resolves conflicts: e.g. `px-2 px-4` → `px-4`).
 *
 * Standard shadcn/ui utility, used by every primitive variant.
 *
 * <p>tailwind-merge по умолчанию не знает наши custom typography utilities
 * (text-body, text-cell, text-mono, text-title-xl/lg/md, text-cap) — он
 * pattern-matches `text-*` как color class, поэтому считал `text-body text-ink`
 * конфликтом (двух color rules) и убирал первый. Результат: buttons теряли
 * font-size, наследовали 16px от body.
 *
 * <p>extendTailwindMerge регистрирует наши utilities в группе `font-size`
 * (separate от colors), и в группе `font-family` для text-mono/text-cap
 * (которые baked в Mono/Tektur respectively). Теперь `text-body text-ink`
 * корректно сохраняется как size + color combination.
 */
const customTwMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': [
        'text-body',
        'text-cell',
        'text-mono',
        'text-cap',
        'text-title-xl',
        'text-title-lg',
        'text-title-md',
      ],
      // text-mono / text-cap baked font-family. Регистрируем отдельной группой
      // чтобы конфликтовали с `font-mono` / `font-display` корректно.
      'font-family': ['text-mono', 'text-cap'],
    },
  },
})

export function cn(...inputs: ClassValue[]) {
  return customTwMerge(clsx(inputs))
}