<template>
  <div
    class="relative mb-6 bg-gray-100 rounded-bl-md rounded-br-md p-4 text-gray-400 font-bold"
  >
    <slot></slot>
    <img class="absolute -right-4 -bottom-4 w-20 h-fit" :src="typeImgs[props.type]" alt="">
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from "vue";

import rank0 from '@/assets/riskAnalysis/section-note-badge-0.png';
import rank1 from '@/assets/riskAnalysis/section-note-badge-1.png';
import rank2 from '@/assets/riskAnalysis/section-note-badge-2.png';
import rank3 from '@/assets/riskAnalysis/section-note-badge-3-green.png';
import rank4 from '@/assets/riskAnalysis/section-note-badge-4-blue.png';
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "primary",
  }
});
const typeImgs = {
  'diagnosis': rank0,
  'danger': rank1,
  'warning': rank2,
  'primary': rank4,
  'success': rank3
}
</script>

<style lang="scss" scoped></style>
