<template>
  <div class="info-box" :class="props.type">
    <div class="wrapper d-flex">
      <div class="background"></div>
      <div class="icon no-shrink">
        <SpIcon name="sp-status-info" />
      </div>
      <div class="text-body h600">
        <slot />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { StatusTypes } from "@/enums";
export default defineComponent({
  props: {
    type: {
      default: "",
      type: String as PropType<StatusTypes>,
    },
  },
  setup(props) {
    return {
      props,
    };
  },
});
</script>

<style lang="scss">
.info-box {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  --color: var(--grey-2);

  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--color);
    opacity: 0.2;
    z-index: 0;
  }

  .wrapper {
    padding: 16px;

    .icon {
      margin-right: var(--spacing-8);

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

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

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

  &.success {
    --color: var(--success-color);
  }
}
</style>
