import type {ComponentProps} from 'react'
import {type FunctionComponent} from 'react'
import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar'
import {cn} from '@/lib/utils'

interface AvatarWithFallbackProps extends ComponentProps<typeof Avatar> {
  avatar: string | null
  firstName?: string | null | undefined
  lastName?: string | null | undefined
}

const AvatarWithFallback: FunctionComponent<AvatarWithFallbackProps> = ({
  avatar,
  lastName,
  firstName,
  className,
  ...avatarProps
}) => {
  return (
    <Avatar className={cn(className)} {...avatarProps}>
      <AvatarImage src={avatar!} />
      <AvatarFallback>
        {firstName?.slice(0, 1).toUpperCase()}
        {lastName?.slice(0, 1).toUpperCase()}
      </AvatarFallback>
    </Avatar>
  )
}

export default AvatarWithFallback
