<template>
  <div class="chat-tabs">
    <div class="chat-tabs__messages">
      <ChatMessage v-for="msg in messages" :key="msg.id" :created-at="msg.createdAt" :username="msg.username" :message="msg.message" />
    </div>

    <PrimeTabs :value="channels[0]">
      <PrimeTabList>
        <PrimeTab v-for="channel in channels" :key="channel" :value="channel">
          Channel: {{ channel }}
        </PrimeTab>
      </PrimeTabList>
      <PrimeTabPanels>
        <PrimeTabPanel :value="channel">
          <ChatEditor />
        </PrimeTabPanel>
      </PrimeTabPanels>
    </PrimeTabs>
  </div>
</template>

<script lang="ts" setup>
const {
  channel,

  messages,
  channels,
} = useChat()
</script>

<style lang="scss" scoped>

</style>
