Messenger/web/src/components/Avatar.tsx

import { avatarColor, initials } from '../lib/format'
import { IconUsers } from './icons'

type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'

interface AvatarProps {
  name: string
  seed: number | string
  size?: AvatarSize
  online?: boolean
  className?: string
}

const SIZE_CLASSES: Record<AvatarSize, string> = {
  sm: 'h-8 w-8 text-[11px]',
  md: 'h-10 w-10 text-xs',
  lg: 'h-12 w-12 text-sm',
  xl: 'h-16 w-16 text-lg',
}

export default function Avatar({ name, seed, size = 'md', online = false, className = '' }: AvatarProps) {
  const background = avatarColor(seed)
  return (
    <span className={`relative inline-flex shrink-0 ${className}`}>
      <span
        className={`bevel pixelated inline-flex items-center justify-center font-bold text-white ${SIZE_CLASSES[size]}`}
        style={{ backgroundColor: background, textShadow: '1px 1px 0 rgba(0,0,0,0.6)' }}
        aria-hidden="true"
      >
        {initials({ display_name: name, username: name })}
      </span>
      {online && (
        <span
          className="absolute -right-1 -bottom-1 h-3 w-3 border border-black bg-online"
          aria-hidden="true"
        />
      )}
    </span>
  )
}

interface GroupAvatarProps {
  name: string
  seed: number | string
  size?: AvatarSize
  className?: string
}

export function GroupAvatar({ name, seed, size = 'md', className = '' }: GroupAvatarProps) {
  const background = avatarColor(seed)
  return (
    <span className={`relative inline-flex shrink-0 ${className}`}>
      <span
        className={`bevel pixelated inline-flex items-center justify-center text-white ${SIZE_CLASSES[size]}`}
        style={{ backgroundColor: background, textShadow: '1px 1px 0 rgba(0,0,0,0.6)' }}
        aria-hidden="true"
        title={name}
      >
        <IconUsers className="h-[55%] w-[55%]" />
      </span>
    </span>
  )
}