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

const twMerge = extendTailwindMerge({
  // Define class groups so twMerge knows which classes override each other
  extend: {
    classGroups: {
      ["font-variants" as any]: [
        "heading1",
        "heading2",
        "heading3",
        "heading4",
        "heading5",
        "heading6",
        "subheading1",
        "subheading2",
        "subheading3",
        "subheading4",
        "subheading5",
        "subheading6",
        "body1",
        "body2",
        "body3",
        "footnote",
        "micro",
        "label1",
        "label2",
        "label3",
        "label4",
      ],
      ["button-sizes" as any]: [
        "btn-small",
        "btn-medium",
        "btn-large",
        "btn-x-large",
      ],
    },
  },
});

/**
 * Utility function to combine class names using clsx
 * @param inputs - Class values to combine
 * @returns Combined class string
 */
export const cx = (...val: ClassValue[]) => twMerge(clsx(...val));

export { clsx };
export type { ClassValue };