<template>
  <div :class="['my-quote', `is-${type}`]">
    <div v-if="showIcon" class="my-quote-icon">
      <slot name="icon">
        <InfoCircleOutlined :rotate="180" />
      </slot>
    </div>

    <slot>
      {{ message }}
    </slot>
  </div>
</template>

<script setup lang="ts">
import { InfoCircleOutlined } from "@ant-design/icons-vue";

defineOptions({
  name: "MyQuote",
});

const props = withDefaults(
  defineProps<{
    message: string;
    type: "primary" | "error" | "warning" | "default";
    showIcon?: boolean;
  }>(),
  {
    type: "default",
    showIcon: true,
  }
);
</script>

<style lang="less" scoped>
.my-quote {
  background: #f2f3f5;
  font-weight: 400;
  font-size: 14px;
  color: #262626;
  line-height: 22px;
  padding: 8px 8px 8px 26px;
  border-left: 2px solid @text-color3;

  &-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: -16px;
    margin-right: 4px;
    margin-top: -2px;
  }

  &.is-primary {
    border-color: @brand-color;

    .my-quote-icon {
      color: @brand-color;
    }
  }
  &.is-error {
    border-color: @error-color;
    .my-quote-icon {
      color: @error-color;
    }
  }
  &.is-success {
    border-color: @success-color;
    .my-quote-icon {
      color: @success-color;
    }
  }
  &.is-warning {
    border-color: @warning-color;
    .my-quote-icon {
      color: @warning-color;
    }
  }
}
</style>
