<template>
  <div class="verification-status">
    <UiButton
      icon="chevron-left"
      color="secondary"
      type="link"
      class="mb-8"
      href="/projects"
    >
      {{ $t('to_main') }}
    </UiButton>

    <h1 class="mb-32">
      Identity verification
    </h1>

    <div class="verification-cards">
      <VerificationBaseCard
        passed
        :info="{ perMonth: '10 000 USD', perDay: '1 000 USD' }"
        :badge="{ type: 'marketing', title: 'Basic' }"
      >
        <VerificationBasic />
      </VerificationBaseCard>

      <VerificationBaseCard
        :badge="{ type: 'extended', title: 'Extended' }"
        link="/verification"
      >
        <VerificationExtended />
      </VerificationBaseCard>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  // middleware: ['auth'],
  centerContent: true,
})
</script>

<style lang="scss">
.verification-status {
  margin: 0 auto;
  width: 834px;
}

.verification-cards {
  display: flex;
  gap: 24px;
}
</style>
