<template>
  <div class="text-sm overflow-x-auto">
    <p class="text-muted-color">
      {{ consumer.id }}
    </p>

    <p>paused: {{ consumer.paused }}</p>

    <p v-for="[key, value] in appData" :key="key">
      {{ key }}: {{ value }}
    </p>
  </div>
</template>

<script setup lang="ts">
import type { Consumer } from 'mediasoup-client/types'

const props = defineProps<{
  consumer: Consumer
}>()

const appData = computed(() => {
  return Object.entries(props.consumer.appData)
})
</script>
