<script setup>
import { computed, useSlots } from "vue";
const props = defineProps({
  inlineActions: { type: Boolean, required: false, skipCheck: true },
  dense: { type: Boolean, required: false, skipCheck: true },
  rounded: { type: Boolean, required: false, skipCheck: true, default: true },
  dark: { type: [Boolean, null], required: false, skipCheck: true },
  icon: { type: String, required: false },
  type: { type: String, required: false, default: "primary" }
});
const classes = computed(() => {
  return [
    `bg-${props.type}`,
    "text-white"
  ];
});
const localIcon = computed(() => {
  if (props.icon) return props.icon;
  if (props.type === "info") return "sym_o_info";
  if (props.type === "warning") return "sym_o_warning";
  if (props.type === "positive") return "sym_o_check_circle_outline";
  if (props.type === "negative") return "sym_o_error";
});
const slots = computed(() => useSlots());
</script>

<template>
    <q-banner v-bind="$props" :class="classes">
        
        <template v-slot:avatar v-if="localIcon">
            <q-icon :name="localIcon" />
        </template>

        <template v-for="(s, name) in slots" v-slot:[name]="props" :key="name">
            <slot :name="name" v-bind="props ?? {}"></slot>
        </template>
    </q-banner>
</template>
