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

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': [{ text: ['display-1', 'display-2', 'title-1', 'title-2', 'body-1', 'body-2', 'meta'] }],
    },
    theme: {
      colors: [
        'bg', 'surface', 'ink', 'ink-soft', 'ink-faint', 'ink-on-accent', 'line',
        'line-subtle', 'hover', 'accent', 'accent-soft', 'accent-mid', 'accent-border',
        'danger', 'success', 'warning', 'info',
      ],
    },
  },
})

/**
 * Compose class names with clsx and de-duplicate Tailwind utilities via
 * tailwind-merge. `cn('p-2', 'p-4')` resolves to `'p-4'`.
 */
export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs))
}