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

import { twJoin } from '@/utils'

export const rootStyles = cva(
	twJoin({
		position: 'relative',
		display: 'flex shrink-0 overflow-hidden',
		visual: 'rounded-full'
	}),
	{
		variants: {
			color: {
				primary: '',
				secondary: '',
				custom: ''
			},
			variant: {
				default: 'text-white',
				label: ''
			},
			size: {
				'2xs': 'size-6',
				xs: 'size-6.5',
				sm: 'size-8',
				md: 'size-9.5',
				lg: 'size-12',
				xl: 'size-16',
				'2xl': 'size-18'
			}
		},
		compoundVariants: [
			{
				color: 'primary',
				variant: 'default',
				class: 'bg-primary'
			},
			{
				color: 'secondary',
				variant: 'default',
				class: 'bg-secondary'
			},
			//
			{
				color: 'primary',
				variant: 'label',
				class: 'text-primary bg-primary/16'
			},
			{
				color: 'secondary',
				variant: 'label',
				class: 'text-secondary bg-secondary/16'
			}
		],
		defaultVariants: {
			variant: 'default',
			size: 'md',
			color: 'primary'
		}
	}
)

export type RootStylesProps = VariantProps<typeof rootStyles>

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

export const imageStyles = twJoin({
	display: 'aspect-square size-full'
})

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

export const fallbackStyles = cva(
	twJoin({
		display: 'flex size-full items-center justify-center',
		text: 'font-semibold leading-none',
		visual: 'rounded-full'
	}),
	{
		variants: {
			size: {
				'2xs': 'text-xs',
				xs: 'text-xs',
				sm: 'text-sm',
				md: 'text-base',
				lg: 'text-lg',
				xl: 'text-3xl',
				'2xl': 'text-4xl'
			}
		},
		defaultVariants: {
			size: 'md'
		}
	}
)
