import React from "react";
import CustomAvatar from "../users/Avatar";
import { useSelectedUserStore } from "../../../store/useCollabStore";
import { useCamMode } from "../../../store/store";

interface CollabUserIconProps {
  userName: string;
  userImage?: string;
  color: string;
  position?: {
    x: number;
    y: number;
    z: number;
  };
  rotation?: {
    x: number;
    y: number;
    z: number;
  };
}

const CollabUserIcon: React.FC<CollabUserIconProps> = ({
  userImage,
  userName,
  color,
  position,
  rotation,
}) => {
  const { setSelectedUser } = useSelectedUserStore();
  const { setCamMode } = useCamMode();
  return (
    <div className="collab-user-live-container">
      <button
        className="user-image-container"
        onClick={() => {
          if(!position || !rotation) return;
          
          // Set the selected user in the store
          setSelectedUser({ color: color, name: userName, location: { position, rotation } });
          setCamMode("FollowPerson");
        }}
      >
        {userImage ? (
          <img className="user-image" src={userImage} alt={userName} />
        ) : (
          <CustomAvatar name={userName} color={color} />
        )}
      </button>
      <div className="user-name" style={{ backgroundColor: color }}>
        {userName}
      </div>
    </div>
  );
};

export default CollabUserIcon;
