<script setup>
import DashboardNavbarBase from "@nuxt/ui-pro/runtime/components/DashboardNavbar.vue"
import UBadge from "@nuxt/ui/components/Badge.vue"

defineOptions({ inheritAttrs: false })

const props = defineProps({
  as: {
    type: null,
    required: false
  },
  icon: {
    type: String,
    required: false
  },
  title: {
    type: String,
    required: false
  },
  toggle: {
    type: [Boolean, Object],
    required: false,
    default: true
  },
  toggleSide: {
    type: String,
    required: false,
    default: "left"
  },
  badge: {
    type: [String, Number],
    required: false
  },
  class: {
    type: null,
    required: false
  },
  ui: {
    type: null,
    required: false
  }
})
</script>

<template>
  <DashboardNavbarBase
      :as="as"
      :icon="icon"
      :title="title"
      :toggle="toggle"
      :toggle-side="toggleSide"
      :class="props.class"
      :ui="ui"
      v-bind="$attrs"
  >
    <template v-if="$slots.toggle" #toggle="slotProps">
      <slot name="toggle" v-bind="slotProps" />
    </template>

    <template v-if="$slots.left" #left="slotProps">
      <slot name="left" v-bind="slotProps" />
    </template>

    <template v-if="$slots.leading" #leading="slotProps">
      <slot name="leading" v-bind="slotProps" />
    </template>

    <template #title>
      <slot name="title">
        <span class="inline-flex min-w-0 items-center gap-2">
          <span class="truncate">{{ title }}</span>
          <UBadge
              v-if="badge !== undefined && badge !== null && badge !== ''"
              size="sm"
              color="neutral"
              variant="subtle"
          >
            {{ badge }}
          </UBadge>
        </span>
      </slot>
    </template>

    <template v-if="$slots.trailing" #trailing="slotProps">
      <slot name="trailing" v-bind="slotProps" />
    </template>

    <slot />

    <template v-if="$slots.right" #right="slotProps">
      <slot name="right" v-bind="slotProps" />
    </template>
  </DashboardNavbarBase>
</template>
