import UserCamera from "./ui/UserCamera";
import UserDevicesControls from "./ui/UserDevicesControls";
import DraggableContainer from "./DraggableContainer";

const users = [
  {
    id: 1,
    name: "John Doe",
    isSpeaking: true,
    isMuted: false,
    isVideoOff: false,
    isControlDisabled: false,
    isAdmin: true,
  },
  {
    id: 2,
    name: "Jane Doe",
    isSpeaking: false,
    isMuted: true,
    isVideoOff: true,
    isControlDisabled: true,
  },
  {
    id: 3,
    name: "Jim Doe",
    isSpeaking: false,
    isMuted: false,
    isVideoOff: false,
    isControlDisabled: false,
  },
];

function SessionUsersPanel2() {
  return (
    <DraggableContainer
      enableSnapping={true}
      autoAlign={true}
      initialCorner={innerWidth >= 640 ? "bottom-right" : "top-right"}
      padding="1.111vw"
      className="flex gap-4"
    >
      {users.map((user) => (
        <UserCamera
          key={user.id}
          onMute={() => console.log(`Mute user ${user.id}`)}
          onVideoOff={() => console.log(`Video off user ${user.id}`)}
          onCanControl={() => console.log(`Can control user ${user.id}`)}
          {...user}
        />
      ))}

      <UserDevicesControls />
    </DraggableContainer>
  );
}

export default SessionUsersPanel2;