<script setup>
import { computed } from "vue";
const props = defineProps({
  type: {
    type: String,
    default: "info"
    //info, warning, negative, positive
  }
});
const icon = computed(() => {
  switch (props.type) {
    case "info":
      return "sym_o_info";
    case "warning":
      return "sym_o_warning";
    case "negative":
      return "sym_o_error";
    case "positive":
      return "sym_o_check_circle_outline";
  }
});
</script>

<template>
    <q-item :class="`bg-${type}`">
        <q-item-section avatar>
            <q-icon :name="icon" class="text-white" />
        </q-item-section>
        <q-item-section class="text-white">
            <slot></slot>
        </q-item-section>
    </q-item>
</template>
