import type { VariantProps } from 'tailwind-variants'

import { createTV } from 'tailwind-variants'

import { twMergeConfig } from './merge-config'

/**
 * Unity-configured tailwind-variants TV function for creating component variants.
 *
 * This is a pre-configured version of tailwind-variants' `createTV` function that includes
 * Unity's custom tailwind-merge configuration. It automatically handles Unity's custom
 * class names including semantic colors, spacing values, typography classes, and more.
 * @example
 * ```tsx
 * import { uyTv } from '@payfit/unity-themes'
 *
 * const button = uyTv({
 *   base: 'uy:px-200 uy:py-100 uy:rounded-100',
 *   variants: {
 *     variant: {
 *       primary: 'uy:bg-surface-primary-default uy:text-content-inverted-default',
 *       secondary: 'uy:bg-surface-neutral-default uy:text-content-neutral-default',
 *     },
 *     size: {
 *       small: 'uy:text-75 uy:px-150 uy:py-75',
 *       large: 'uy:text-200 uy:px-300 uy:py-150',
 *     }
 *   },
 *   defaultVariants: {
 *     variant: 'primary',
 *     size: 'small'
 *   }
 * })
 *
 * // Usage in component
 * <button className={button({ variant: 'secondary', size: 'large' })}>
 *   Click me
 * </button>
 * ```
 * @description
 * - Automatically merges conflicting Unity classes (e.g., `uy:bg-surface-primary` + `uy:bg-surface-danger` → `uy:bg-surface-danger`)
 * - Supports all Unity design tokens: colors, spacing, typography, shadows, border radius
 * - Handles responsive and state variants correctly
 * - Compatible with standard Tailwind classes alongside Unity classes
 * @see {@link https://www.tailwind-variants.org/ Tailwind Variants Documentation}
 * @see {@link twMergeConfig} for the Unity merge configuration details
 */
export const uyTv = createTV({
  twMerge: true,
  twMergeConfig,
})

export type { VariantProps }