<template>
  <div class="status-icon">
    <div class="icon">
      <SpIcon name="sp-status-success" v-if="props.type === 'success'" />
      <SpIcon name="sp-status-alert" v-if="props.type === 'alert'" />
      <SpIcon name="sp-status-info" v-if="props.type === 'info'" />
      <SpIcon name="sp-status-error" v-if="props.type === 'error'" />
    </div>
    <div class="title h400 caps" v-if="props.title" v-html="props.title"></div>
    <div
      class="subtitle h700"
      v-if="props.subtitle"
      v-html="props.subtitle"
    ></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { StatusTypes } from "@/enums";
export default defineComponent({
  props: {
    type: {
      required: true,
      default: StatusTypes.Error,
      type: String as PropType<StatusTypes>,
    },
    title: {
      type: String,
      default: "",
    },
    subtitle: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    return {
      props,
    };
  },
});
</script>

<style lang="scss">
.status-icon {
  text-align: center;
  --size: 152px;
  --text-margin: 8px;
  --fill: auto;

  .icon {
    margin: 0 auto;
    width: var(--size);
    height: var(--size);

    .alert {
      fill: var(--alert-color);
    }

    .success {
      fill: var(--success-color);
    }

    .info {
      fill: var(--info-color);
    }

    .error {
      fill: var(--error-color);
    }

    svg path {
      fill: var(--fill);
    }
  }

  .subtitle {
    margin-top: var(--text-margin);
    color: var(--text-color-secondary);
  }

  @include desktop-1280max() {
    --size: 112px;
    --text-margin: 0;
  }
}
</style>
