import { type ComponentProps } from 'react'

import { Avatar as RadixAvatar } from 'radix-ui'

import {
	fallbackStyles,
	imageStyles,
	rootStyles,
	type RootStylesProps
} from './Avatar.styles'

import { getInitials } from '@/utils'

type AvatarProps = ComponentProps<typeof RadixAvatar.Root> &
	RootStylesProps & {
		src?: string | null
		alt: string
	}

function Avatar({
	src,
	alt,
	color,
	variant,
	size,
	className,
	...props
}: AvatarProps) {
	return (
		<RadixAvatar.Root
			className={rootStyles({ color, variant, size, className })}
			{...props}
		>
			<RadixAvatar.Image
				src={src || undefined}
				alt={alt}
				className={imageStyles}
			/>
			<RadixAvatar.Fallback className={fallbackStyles({ size })}>
				{getInitials(alt)}
			</RadixAvatar.Fallback>
		</RadixAvatar.Root>
	)
}

export { Avatar }
