import React from 'react'
import {useVroomUI} from '@/contexts/VroomUI'

export interface AttendeesProps {
  participantsState: any,
  attendee: any
}

export function Attendees (props: AttendeesProps): JSX.Element {
  const alreadyPublisher = props.participantsState.find((p: any) => p.id === props.attendee.id)
  const vroomUI = useVroomUI()

  return alreadyPublisher
    ? <></>
    : (
      <div className="small-video" style={{
        width: vroomUI.layoutUI === 3 ? '33%' : '100%',
        height: '100%',
        backgroundColor: '#333',
        position: 'relative',
        color: '#fff'
      }}>
        <p className="">{props.attendee.display || ''}</p>
      </div>
    )
}