<template>
  <div class="flex justify-around items-center h-8 w-full font-bold border-0" :class="bannerVariant">
    <slot name="default">
      <div v-if="env">{{ env.toUpperCase() }} Environment</div>

      <div v-if="bannerContext">{{bannerContext }}</div>

      <div v-if="message">{{ message }}</div>
    </slot>
  </div>
</template>

<script setup>
  import { computed } from "vue";
  import { bannerProps } from "@/components/banner/banner-props";

  const props = defineProps({
    ...bannerProps
  })

  const bannerContext = computed(() => {
    if(props.context)
      return Object.entries(props.context).map(c => c.join(': ')).join('  ~   ')

    return ''
  })

  const bannerVariant = computed(() => {
    switch(props.variant) {
      case 'primary':
        return 'bg-primary text-secondary'
      case 'secondary':
        return 'bg-secondary text-white'
      case 'default':
        return 'bg-default text-white'
      case 'success':
        return 'bg-success text-white'
      case 'warning':
        return 'bg-warning text-white'
      case 'danger':
        return 'bg-danger text-white'
      default:
        return 'bg-info text-white'
    }
  })
</script>

<script>
export default {
  name: "AisBanner"
}
</script>