<template>
  <div
    class="relative rounded overflow-hidden flex items-center justify-center"
    :class="{
      'group cursor-pointer hover:outline outline-primary': !isMe,
    }"
    @click="watch"
  >
    <video :srcObject="stream" muted autoplay />

    <PrimeTag
      severity="secondary"
      class="absolute bottom-2 text-sm opacity-70"
      :class="{
        'group-hover:opacity-100': !isMe,
      }"
      rounded
    >
      {{ isMe ? 'You' : client.username }}
    </PrimeTag>
  </div>
</template>

<script setup lang="ts">
import type { ChadClient } from '#shared/types'

const props = defineProps<{
  client: ChadClient
  stream: MediaStream
}>()

const { me } = useClients()
const fullscreenVideo = useFullscreenVideo()

const isMe = computed(() => {
  return props.client.socketId === me.value?.socketId
})

function watch() {
  if (isMe.value)
    return

  fullscreenVideo.show(props.stream)
}
</script>

<style>

</style>
