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

import { twJoin } from '@/utils'

export const rootStyles = twJoin({
	display: 'mt-1 first:mt-0'
})

// /////////////////////////

export const linkStyles = cva(
	twJoin({
		display: 'flex items-center h-9.5 px-3 py-2 oveflow-hidden',
		text: 'text-base text-gray-800',
		visual: 'rounded-md outline-none',
		animation: 'transition-(color,bg) duration-300',
		hover: 'hover:bg-gray-100',
		attrs: [
			'group-data-[state="collapsed"]:[&_svg]:mr-0',
			'group-data-[state="collapsed"]:[&_span]:hidden',
			'group-data-[state="collapsed"]:[&_span]:opacity-0',
			//
			'group-data-[state="collapsed"]:justify-center'
		],
		childs: [
			'[&_svg]:size-5.5',
			'[&_svg]:mr-2',
			'[&_svg]:transition-[margin-inline-end]',
			'[&_svg]:grow-0',
			'[&_svg]:shrink-0'
		],
		//
		dark: {
			text: 'dark:text-dark-gray-200',
			hover: {
				visual: 'dark:hover:bg-dark-gray-800/50'
			}
		}
	}),
	{
		variants: {
			active: {
				true: 'bg-linear-(--gradient-primary) shadow-primary-sm text-white'
			}
		},
		defaultVariants: {
			active: false
		}
	}
)

export type LinkStylesProps = VariantProps<typeof linkStyles>
