<template>
  <div
    class="verification-card"
    :class="{
      'verification-card--passed': passed,
    }"
  >
    <div class="verification-card__header">
      <UiBadge
        v-if="badge"
        :type="badge.type"
        class="mb-24"
      >
        {{ badge.title }}
      </UiBadge>

      <p class="verification-card-info__title">
        Withdrawal
      </p>

      <div
        v-if="info"
        class="verification-card-info"
      >
        <div>
          <span class="verification-card-info__per-month-amount">
            {{ info.perMonth }}
          </span>

          <span class="verification-card-info__per-month-text"> / month </span>
        </div>

        <div class="mt-4">
          <span class="verification-card-info__per-day-amount">
            {{ info.perDay }}
          </span>

          <span class="verification-card-info__per-day-text"> / day </span>
        </div>
      </div>

      <div
        v-else
        class="verification-card-info"
      >
        <span class="verification-card-info__per-month-amount">
          No limit
        </span>

        <span class="verification-card-info__per-month-text"> / month & day </span>
      </div>
    </div>

    <div class="verification-card-body">
      <slot />
    </div>

    <div class="verification-card__action">
      <UiAlert
        v-if="passed"
        type="positive"
        text="Your current status"
      />

      <UiButton
        v-else
        class="w-100"
        size="large"
        :href="link"
      >
        Start verification
      </UiButton>
    </div>
  </div>
</template>

<script setup>
defineProps({
  passed: {
    type: Boolean,
    default: false,
  },
  badge: {
    type: Object,
    required: true,
  },
  info: {
    type: Object,
    default: null,
  },
  link: {
    type: String,
    default: '#',
  },
})
</script>

<style lang="scss">
.verification-card {
  $self: &;
  display: flex;
  flex-direction: column;

  width: var(--verification-card-width, 405px);
  //height: 585px;
  padding: 24px;
  border-radius: 12px;
  background-color: $clr-grey-200;

  &__header {
    height: 157px;
    border-bottom: 1px solid $clr-grey-400;
    margin-bottom: 16px;
  }

  &__action {
    margin-top: auto;
  }

  &--passed {
    background-color: $clr-white;
    outline: $clr-green-500 solid 2px;
    outline-offset: -2px;

    .verification-card__title {
      color: $clr-black;
    }
  }
}

.verification-card-info {
  &__per-month-amount {
    @include h2;
  }

  &__per-month-text {
    @include txt-l-sb;
    color: $clr-grey-400;
  }

  &__per-day-amount {
    @include txt-l-sb;
  }

  &__per-day-text {
    @include txt-l-sb;
    color: $clr-grey-400;
  }

  &__title {
    @include txt-l-m;
    color: $clr-grey-500;
    margin-bottom: 4px;
  }
}

.verification-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
</style>
