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

/*
 * tailwind-merge configurado com os tamanhos de fonte custom do DS
 * (text-heading-lg/md/sm, text-subtitle, text-body, text-body-sm). Sem isso, o
 * merge trata `text-heading-lg` como cor e o DESCARTA ao ver `text-white`,
 * zerando o tamanho do título. Ao registrá-los no grupo 'font-size', eles são
 * tratados corretamente (não conflitam com cor e se sobrescrevem entre si).
 */
const twMerge = extendTailwindMerge({
    extend: {
        classGroups: {
            'font-size': [
                { text: ['heading-lg', 'heading-md', 'heading-sm', 'subtitle', 'body', 'body-sm'] },
            ],
        },
    },
});

/** Merge de classes Tailwind (padrão shadcn/ui), ciente dos tokens de fonte do DS. */
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}