<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

interface Props {
  agentTitle: string
}

const { t } = useI18n()

defineProps<Props>()

const emit = defineEmits<{
  toCreateApplication: []
  toLogin: []
}>()

const userStore = useUserStore()

const isLogin = computed(() => {
  return userStore.isLogin
})

function handleToCreateApplication() {
  emit('toCreateApplication')
}

function handleToLogin() {
  emit('toLogin')
}
</script>

<template>
  <header class="flex h-[48px] w-full items-center justify-between border-b border-[#e8e9eb] bg-white px-4">
    <div class="bg-px-logo-png bg-contain! h-[24px] w-[100px] bg-center bg-no-repeat" />
    <div>
      <NButton
        v-show="isLogin"
        type="primary"
        class="rounded-md! h-[32px]! text-xs! min-w-[80px]!"
        @click="handleToCreateApplication"
      >
        {{ t('common_module.create_agent_btn_text') }}
      </NButton>
      <NButton v-show="!isLogin" type="primary" class="rounded-md! h-[32px]! text-xs! w-[80px]!" @click="handleToLogin">
        <span class="text-xs"> {{ t('common_module.login_now') }}</span>
      </NButton>
    </div>
  </header>
</template>
