<template>
  <div class="ResultBlock">
    <q-icon class="ResultBlock-Icon" :name="computedIcon" :color="type" />
    <div class="ResultBlock-Text">
      <slot name="header">
        {{ header }}
      </slot>
    </div>
    <p class="ResultBlock-Info">
      <slot>
        {{ text }}
      </slot>
    </p>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

const ICONS = {
  positive: 'pgs-double-check',
  negative: 'pgs-stop',
  info: 'pgs-document',
};

@Component({})
export default class ResultBlock extends Vue {
  @Prop({ default: 'positive' })
  readonly type: 'positive' | 'negative' | 'info';

  @Prop()
  readonly icon?: string;

  @Prop()
  readonly header: string;

  @Prop()
  readonly text: string;

  get computedIcon(): string {
    return this.icon || ICONS[this.type];
  }
}
</script>

<style lang="scss" scoped>
.ResultBlock {
  flex-basis: 80%;
  font-family: 'Golos UI', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &-Icon {
    border-radius: 50%;
    background-color: rgba(1, 72, 116, 0.11);
    font-size: 50px;
    margin-bottom: 10px;
  }
  &-Text {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    /* identical to box height, or 125% */
    letter-spacing: -0.015em;
  }
  &-Info {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
  }
}
</style>
