<template>
  <div class="illustration-title">
    <img
      v-if="illustration"
      :src="'/img/illustrations/' + illustration + '.png'"
    />

    <div class="texts" v-if="title || subtitle">
      <h2 class="h400 caps" v-html="title" v-if="title"></h2>
      <p class="h600" v-html="subtitle" v-if="subtitle"></p>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    illustration: {
      default: "",
      type: String,
    },
    title: {
      default: "",
      type: String,
    },
    subtitle: {
      default: "",
      type: String,
    },
  },
  setup(props) {
    return {
      ...props,
    };
  },
});
</script>

<style lang="scss">
.illustration-title {
  --title-color: var(--text-color-primary);
  --subtitle-color: var(--text-color-secondary);

  text-align: center;
  margin-bottom: 32px;

  img {
    width: 86px;
    height: 86px;
    margin-bottom: 8px;
  }

  .texts {
    * {
      color: var(--title-color);
    }

    h2 + p {
      margin-top: 4px;
      color: var(--subtitle-color);
    }
  }

  @include screen-md() {
    img {
      width: 108px;
      height: 108px;
    }
  }

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

    img {
      width: 156px;
      height: 156px;
      margin-bottom: 16px;
    }

    .texts {
      h2 + p {
        margin-top: 8px;
      }
    }
  }
}
</style>
