import { useMemo } from 'react'
import Avatar from '@mui/material/Avatar'
import type { SxProps, Theme } from '@mui/material/styles'
import { createAvatar } from '@dicebear/core'
import { DEFAULT_STYLE_ID, getStyleById } from '@/shared/lib/avatar-styles'

type UserAvatarProps = {
  userId: string
  avatarUrl?: string | null
  avatarStyle?: string | null
  size?: number
  sx?: SxProps<Theme>
}

export function UserAvatar({ userId, avatarUrl, avatarStyle, size = 40, sx }: UserAvatarProps) {
  const generatedSrc = useMemo(() => {
    const styleDef = getStyleById(avatarStyle || DEFAULT_STYLE_ID)
    const avatar = createAvatar(styleDef.style, { seed: userId })
    return avatar.toDataUri()
  }, [userId, avatarStyle])

  const src = avatarUrl || generatedSrc

  return (
    <Avatar src={src} sx={{ width: size, height: size, bgcolor: 'primary.main', ...sx }}>
      ?
    </Avatar>
  )
}