<template>
  <nav
    :class="[
      'mc-breadcrumb',
      {
        'mc-breadcrumb--dark': dark,
        'mc-breadcrumb--responsive': responsive,
      },
    ]"
    aria-label="Breadcrumb"
  >
    <ul class="mc-breadcrumb__container">
      <!-- @slot Use this slot to insert the Breadcrumb Items -->
      <slot />
    </ul>
  </nav>
</template>

<script setup lang="ts">
import {
  type ComponentInternalInstance,
  getCurrentInstance,
  provide,
  ref,
  defineSlots,
} from 'vue';
import { childItemsInjectionKey, parentInjectionKey } from './types';

defineProps({
  /**
   * Enables the "dark mode" of the component to be used on dark backgrounds
   */
  dark: Boolean,
  /**
   * On lower resolutions allows to display only the previous level link of the current page
   * @see See [Documentation](https://mozaic.adeo.cloud/components/breadcrumb/code/#behaviours)
   */
  responsive: Boolean,
});

defineSlots<{
  default: () => any;
}>();

provide(parentInjectionKey, getCurrentInstance()!);

const items = ref<ComponentInternalInstance[]>([]);
provide(childItemsInjectionKey, items);
</script>

<style lang="scss" scoped>
@import '@mozaic-ds/styles/settings-tools/all-settings';

@import '@mozaic-ds/styles/components/c.breadcrumb';
</style>
