import React from 'react'
import { Audio } from '../../Media'
import { useZocksStore } from '../../../app'
import { selectUnmutedRemoteParticipantAudioTracks } from '../../../store'

export const ParticipantAudio: React.FC = () => {
  const audioTracks = useZocksStore(selectUnmutedRemoteParticipantAudioTracks)

  return (
    <>
      {audioTracks.map(({ track }) => (
        <Audio key={track.id} audioStream={track} />
      ))}
    </>
  )
}
