import React from "react";
import CustomAvatar from "./users/Avatar";

interface CollabUserIconProps {
  userName: string;
  userImage?: string;
  color: string;
}

const CollabUserIcon: React.FC<CollabUserIconProps> = ({
  userImage,
  userName,
  color,
}) => {
  return (
    <div className="collab-user-live-container">
      <div className="user-image-container">
        {userImage ? (
          <img className="user-image" src={userImage} alt={userName} />
        ) : (
          <CustomAvatar name={userName} color={color} />
        )}
      </div>
      <div className="user-name" style={{ backgroundColor: color }}>
        {userName}
      </div>
    </div>
  );
};

export default CollabUserIcon;