<template>
  <div class="flex items-center gap-3 py-3">
    <PrimeAvatar icon="pi pi-user" size="small" />

    <div class="flex-1">
      <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
        {{ client.username }}
      </div>
      <div class="mt-1 text-xs leading-5 text-muted-color">
        {{ client.id }}
      </div>
    </div>

    <PrimeBadge severity="secondary" value="Muted" />

    <PrimeButton icon="pi pi-ellipsis-h" text size="small" @click="menuRef?.toggle" />

    <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
      <template #start>
        <div class="px-4 py-3">
          <div class="flex justify-between">
            <span>Volume</span>
            <span>{{ volume }}</span>
          </div>
          <PrimeSlider v-model="volume" class="mt-4" :min="0" :max="100" :step="5" />
        </div>
      </template>
    </PrimeMenu>
  </div>
</template>

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

defineProps<{
  client: ChadClient
}>()

const menuRef = useTemplateRef('menu')
const volume = ref(100)

const menuItems: MenuItem[] = [
  {
    label: 'Mute',
    icon: 'pi pi-headphones',
  },
  {
    label: 'DM',
    icon: 'pi pi-comment',
    disabled: true,
  },
]
</script>
