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

const avatarVariants = cva('relative flex shrink-0 rounded-full', {
  variants: {
    size: {
      sm: 'h-8 w-8',
      default: 'h-10 w-10',
      lg: 'h-12 w-12',
    },
  },
  defaultVariants: { size: 'default' },
})

export interface AvatarProps
  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
    VariantProps<typeof avatarVariants> {}

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  AvatarProps
>(({ className, size = 'default', ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(avatarVariants({ size }), className)}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  AvatarImageProps
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn(
      'aspect-square h-full w-full overflow-hidden rounded-full object-cover',
      className
    )}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  AvatarFallbackProps
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      'flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-fill-tertiary text-sm font-medium text-text',
      className
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export type AvatarBadgeProps = React.HTMLAttributes<HTMLSpanElement>

const AvatarBadge = React.forwardRef<HTMLSpanElement, AvatarBadgeProps>(
  ({ className, ...props }, ref) => (
    <span
      ref={ref}
      className={cn(
        'absolute bottom-0 right-0 z-10 block h-3 w-3 rounded-full border-2 border-bg-base bg-success',
        className
      )}
      {...props}
    />
  )
)
AvatarBadge.displayName = 'AvatarBadge'

export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>

const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('flex -space-x-2 [&>*]:ring-2 [&>*]:ring-bg-base', className)}
      {...props}
    />
  )
)
AvatarGroup.displayName = 'AvatarGroup'

export type AvatarGroupCountProps = React.HTMLAttributes<HTMLSpanElement>

const AvatarGroupCount = React.forwardRef<HTMLSpanElement, AvatarGroupCountProps>(
  ({ className, ...props }, ref) => (
    <span
      ref={ref}
      className={cn(
        'inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-bg-base bg-fill-tertiary text-sm font-medium text-text',
        className
      )}
      {...props}
    />
  )
)
AvatarGroupCount.displayName = 'AvatarGroupCount'

export {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarBadge,
  AvatarGroup,
  AvatarGroupCount,
}
export { avatarVariants }