import React from 'react'
import shallow from 'zustand/shallow'

import Phantom from './Phantom'
import useStore from '../store'

const Users: React.FC = () => {
  const socket = useStore((state) => state.socket)
  const users = useStore(
    (state) => (state.userTransforms ? Object.keys(state.userTransforms) : null),
    shallow,
  )

  if (users === null || socket === null) {
    return null
  }

  return (
    <>
      {users.map((user) =>
        user === socket.id ? null : <Phantom id={user} key={user} />,
      )}
    </>
  )
}

export default Users
