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

import { twJoin } from '@/utils'

export const rootStyles = twJoin({
	display: 'flex gap-1'
})

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

export const itemStyles = cva(
	twJoin({
		mouse: 'cursor-pointer',
		display: 'flex items-center justify-center',
		text: 'text-gray-800',
		visual: 'bg-secondary/16',
		hover: 'hover:bg-secondary/32',
		focus: 'focus-visible:bg-secondary/32 outline-none',
		active: 'active:bg-secondary/32',
		disabled: [
			'disabled:cursor-not-allowed!',
			'disabled:select-none',
			'disabled:opacity-65',
			'disabled:shadow-none'
		],
		//
		dark: {
			text: 'dark:text-dark-gray-300',
			visual: 'dark:bg-dark-gray-700/16',
			hover: 'dark:hover:bg-dark-gray-700/32',
			focus: 'dark:focus-visible:bg-dark-gray-700/32',
			active: 'dark:active:bg-dark-gray-700/32'
		}
	}),
	{
		variants: {
			size: {
				sm: 'size-7 py-1 px-2 text-sm rounded-sm',
				md: 'size-8.5 py-1.5 px-2.5 text-base rounded-md',
				lg: 'size-11 py-2 px-4 text-lg rounded-lg'
			},
			type: {
				text: '[&_svg]:hidden',
				icon: '[&_span]:hidden'
			},
			isPrevOrNext: {
				true: ''
			},
			isActive: {
				true: twJoin({
					mouse: 'cursor-not-allowed!',
					text: '!text-white',
					visual: '!bg-primary shadow-sm',
					transform: 'scale-98'
				})
			}
		},
		compoundVariants: [
			{
				isPrevOrNext: true,
				type: 'text',
				class: 'w-auto'
			},
			{
				isPrevOrNext: true,
				type: 'icon',
				class: '!p-2 [&_svg]:size-5'
			}
		],
		defaultVariants: {
			size: 'md',
			type: 'text',
			isPrevOrNext: false,
			isActive: false
		}
	}
)
