Remote-Terminal-for-MeshCore/frontend/src/components/ContactAvatar.tsx

import { getContactAvatar } from '../utils/contactAvatar';

interface ContactAvatarProps {
  name: string | null;
  publicKey: string;
  size?: number;
  contactType?: number;
  clickable?: boolean;
}

export function ContactAvatar({
  name,
  publicKey,
  size = 28,
  contactType,
  clickable,
}: ContactAvatarProps) {
  const avatar = getContactAvatar(name, publicKey, contactType);

  return (
    <div
      className={`flex items-center justify-center rounded-full font-semibold flex-shrink-0 select-none${clickable ? ' cursor-pointer' : ''}`}
      style={{
        backgroundColor: avatar.background,
        color: avatar.textColor,
        width: size,
        height: size,
        fontSize: size * 0.45,
      }}
      aria-hidden="true"
    >
      {avatar.text}
    </div>
  );
}