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

/**
 * The shadcn `cn`, on a `twMerge` that knows this project's theme.
 *
 * `tailwind-merge` is v2 here — importing from a v3 path (`tailwind-merge/v3`
 * or the `createTailwindMerge` split entry) resolves at type level and then
 * fails at bundle time, so keep this import bare.
 *
 * The extension is load-bearing, not cosmetic. Stock `twMerge` only knows the
 * t-shirt font sizes, so it files every custom `text-<size>` from
 * tailwind.config.js (`text-label`, `text-ui`, `text-h3`, …) under text
 * COLOUR — and `cn('text-label text-muted')` silently drops the size. Every
 * `cva` variant and every `className` override runs through here, so without
 * this list the whole type scale loses to the first colour class it meets.
 * The other groups exist so an override can actually override
 * (`shadow-overlay` beats `shadow-sm`, `rounded-control` beats `rounded-md`).
 * Keep these lists in step with `theme.extend` in tailwind.config.js.
 */
const FONT_SIZES = [
  'display',
  'display-lg',
  'display-xl',
  'h1',
  'h1-lg',
  'h2',
  'h2-lg',
  'h3',
  'lede',
  'lede-lg',
  'claim',
  'claim-lg',
  'prose',
  'ui',
  'small',
  'caption',
  'label',
  'mono-data',
  'stat',
  'metric',
  'figure',
  'figure-lg',
  'code',
];

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': [{ text: FONT_SIZES }],
      shadow: [{ shadow: ['overlay'] }],
      rounded: [{ rounded: ['tile', 'control', 'surface'] }],
      tracking: [{ tracking: ['label'] }],
      'max-w': [{ 'max-w': ['canvas', 'measure', 'measure-wide'] }],
      ease: [{ ease: ['enter', 'exit'] }],
    },
  },
});

export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
}
