<template>
  <div class="w-full h-full flex justify-center items-center">
    <PrimeCard class="w-2/5">
      <template #content>
        <form class="flex flex-col gap-3" @submit.prevent="submit">
          <PrimeInputText v-model="username" type="text" placeholder="Username" />

          <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!username" type="submit" />
        </form>
      </template>
    </PrimeCard>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  name: 'Login',
  layout: 'login',
})

const { username } = useGlobalState()
const { init } = useMediasoup()

async function submit() {
  if (!username.value)
    return

  await navigateTo('/')
}
</script>
