import { cva, type VariantProps } from 'class-variance-authority'

import { twJoin } from '@/utils'

export const rootStyles = cva(
	twJoin({
		display: 'inline-flex items-center justify-center shrink-0',
		text: 'font-medium whitespace-nowrap leading-none! tracking-wide'
	}),
	{
		variants: {
			color: {
				primary: '',
				danger: ''
			},
			variant: {
				default: 'text-white',
				label: ''
			},
			size: {
				xs: 'h-4 px-1.5 py-1 text-xs rounded-sm',
				sm: 'h-4.5 px-2 py-1.5 text-sm rounded-sm',
				md: 'h-6 px-2.5 py-1.5 text-sm rounded-md [&_svg]:size-4'
			},
			pill: {
				true: 'rounded-full!'
			},
			icon: {
				true: ''
			}
		},
		compoundVariants: [
			{
				size: 'xs',
				icon: true,
				class: 'size-4 py-1'
			},
			{
				size: 'sm',
				icon: true,
				class: 'size-4.5 py-1.5'
			},
			{
				size: 'md',
				icon: true,
				class: 'size-6 py-1.5'
			},
			//
			{
				color: 'primary',
				variant: 'default',
				class: twJoin({
					visual: 'bg-primary shadow-primary-sm',
					dark: 'dark:shadow-dark-sm'
				})
			},
			{
				color: 'primary',
				variant: 'label',
				class: twJoin({
					text: 'text-primary',
					visual: 'bg-primary/16'
				})
			},
			//
			{
				color: 'danger',
				variant: 'default',
				class: twJoin({
					visual: 'bg-danger shadow-danger-sm',
					dark: 'dark:shadow-dark-sm'
				})
			},
			{
				color: 'danger',
				variant: 'label',
				class: twJoin({
					text: 'text-danger',
					visual: 'bg-danger/16'
				})
			}
		],
		defaultVariants: {
			variant: 'default',
			size: 'md',
			color: 'primary',
			pill: false,
			icon: false
		}
	}
)

export type RootStylesProps = VariantProps<typeof rootStyles>
