<template>
  <div class="auth-heading">
    <img :src="logo" alt="مدرسه بانو" class="auth-heading__logo" />
    <h2 class="auth-heading__title">{{ title }}</h2>
    <p v-if="step === 'otp'" class="auth-heading__subtitle">
      <span class="auth-heading__phone-label">ارسال کد فعال‌سازی به شماره</span>
      <span class="auth-heading__phone">{{ phoneNumber || '*******' }}</span>
    </p>
    <p v-else-if="subtitle" class="auth-heading__subtitle">
      <slot name="subtitle">{{ subtitle }}</slot>
    </p>
    <slot name="below" />
  </div>
</template>

<script setup>
import { gallery } from '@/utils/gallery'

defineProps({
  title: { type: String, required: true },
  subtitle: { type: String, default: '' },
  step: { type: String, default: '' },
  phoneNumber: { type: String, default: '' },
})

const logo = gallery.authLogo
</script>

<style lang="scss" scoped>
.auth-heading {
  text-align: center;
  margin-bottom: 1.5rem;

  &__logo {
    margin: 0 auto 0.5rem;
    max-height: 59px;

    @media (min-width: 1024px) {
      height: 2.75rem;
    }
  }

  &__title {
    font-family: var(--font-family-fa);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-prim-text);
    margin: 0;
  }

  &__subtitle {
    font-family: var(--font-family-fa);
    font-weight: 400;
    font-size: 0.75rem;
    color: #a7a7a7;
    margin: 0.25rem 0 0;
  }

  &__phone-label {
    padding-inline-end: 0.75rem;
    color: #a7a7a7;
    font-family: var(--font-family-fa);
    border-left: 1px solid #a7a7a7;
  }

  &__phone {
    padding-inline-start: 0.75rem;
    color: var(--color-prim-gray);
    font-family: var(--font-family-number-fa);
  }
}
</style>
