<template>
  <div
    class="break-inside-avoid h-10 flex items-center rounded-tl-3xl rounded-tr-md text-center font-bold w-full text-white"
    :style="{
      background: lineBg,
    }"
  >
    <div class="h-8 w-8 ml-4 mr-2 flex items-center justify-center">
      <slot name="icon">
        <img src="@/assets/riskAnalysis/icon-warning.png" alt="" class="h-6" />
      </slot>
    </div>
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "primary",
  },
  customBg: {
    type: Array,
    default: undefined,
  },
});
const types = {
  primary: ["#239FED", "rgba(35,159,237,0.1)"],
  warning: ["#EA9000", "rgba(234,144,0,0.1)"],
  danger: ["#C7492F", "rgba(197,72,47,0.1)"],
  diagnosis: ["#9333ea", "rgba(215, 52, 248, 0.1)"],
  success: ["#11A85D", "rgba(17,168,93,0.1)"],
};
const lineBg = computed(() => {
  if (props.customBg?.length) {
    return `linear-gradient(90deg, ${props.customBg[0]} 0%, ${props.customBg[1]} 100%)`;
  }
  return `linear-gradient(90deg, ${types[props.type][0]} 0%, ${
    types[props.type][1]
  } 100%)`;
});
</script>

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