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

import { twJoin } from '@/utils'

export const rootStyles = cva(
	twJoin({
		tw: 'peer',
		display: 'w-7.5 h-4.5 p-0.5 mr-0.5',
		visual: 'border border-divider rounded-full',
		attrs: 'data-[state="checked"]:shadow-sm'
	}),
	{
		variants: {
			color: {
				primary:
					'data-[state="checked"]:bg-primary data-[state="checked"]:border-primary'
			}
		},
		defaultVariants: {
			color: 'primary'
		}
	}
)

export type RootStylesProps = VariantProps<typeof rootStyles>

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

export const thumbStyles = twJoin({
	display: 'block size-3',
	visual: 'bg-divider rounded-full',
	animation: 'transition-all',
	attrs: 'data-[state="checked"]:translate-x-full data-[state="checked"]:bg-white'
})
