<template>
  <div class="onboarding-page-title">
    <img
      v-if="props.illustration"
      :src="'/img/illustrations/' + props.illustration + '.png'"
      :alt="illustration"
    />
    <p class="h400 caps">{{ props.title }}</p>
    <p class="h700" v-html="props.sub"></p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    illustration: {
      default: "rocket",
      type: String,
    },
    title: {
      default: "",
      type: String,
    },
    sub: {
      default: "",
      type: String,
    },
  },
  setup(props) {
    return {
      props,
    };
  },
});
</script>
<style lang="scss">
.onboarding-page-title {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 86px;
    height: 86px;
    margin-bottom: var(--illustration-bot-margin);
  }

  .h400 {
    text-align: center;
  }

  .h700 {
    color: var(--text-color-secondary);
    text-align: center;
  }

  @include screen-md() {
    margin-bottom: 32px;

    img {
      width: 108px;
      height: 108px;
    }

    .h400 {
      margin-bottom: 4px;
    }
  }

  @include screen-lg() {
    margin-bottom: 48px;

    img {
      width: 156px;
      height: 156px;
    }

    .h400 {
      margin-bottom: 8px;
    }
  }
}
</style>
