import React from 'react'
import { useParticipant } from '../../store'
import { Video } from '../Media'
import { ScreenShareProps } from '../Participant'
import zocksStyle from './ScreenShare.module.scss'
import { getClassName, getMergedClassNames } from '../common'

export const ScreenShare: React.FC<ScreenShareProps> = ({ participant, styles }) => {
  const {
    tracks: { screenShareTrack },
  } = useParticipant(participant)
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('screen-share', mergedStyles)}>
      {screenShareTrack && screenShareTrack.isSubscribed && <Video videoStream={screenShareTrack.track} />}
    </div>
  )
}
