import * as React from 'react'
import * as RAvatar from '@radix-ui/react-avatar'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from './cva'

const avatarVariants = cva(
  'inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-[var(--mod-color-accent-3)] text-[var(--mod-color-accent-11)]',
  {
  variants: { size: { sm: 'h-6 w-6 text-xs', md: 'h-8 w-8 text-sm', lg: 'h-12 w-12 text-base' } },
  defaultVariants: { size: 'md' },
  },
)

export interface AvatarProps extends VariantProps<typeof avatarVariants> {
  src?: string
  alt: string
  fallback: string
  className?: string
}

export function Avatar({ src, alt, fallback, size, className }: AvatarProps) {
  return (
    <RAvatar.Root className={cn(avatarVariants({ size }), className)}>
      {src ? <RAvatar.Image src={src} alt={alt} className="h-full w-full object-cover" /> : null}
      <RAvatar.Fallback className="font-medium data-[state=visible]:bg-[var(--mod-color-accent-3)]">
        {fallback}
      </RAvatar.Fallback>
    </RAvatar.Root>
  )
}