<script setup>
import { RouterLink, useRoute } from 'vue-router';
import { breadcrumbItem, breadcrumbMeta } from '@Controllers/BreadcrumbController.js';

import IconButton from '@Holos/Button/Icon.vue'
import BreadcrumbContainer from '@Holos/Breadcrumb/Container.vue'
import BreadcrumbItem from '@Holos/Breadcrumb/Item.vue'

/** Definidores */
const vroute = useRoute();

const props = defineProps({
    title: String
});

const breadcrumbs = breadcrumbMeta(vroute);

</script>

<template>
    <div>
        <BreadcrumbContainer>
            <template v-for="(item, index) in breadcrumbs" :key="item.name">
                <BreadcrumbItem
                    :name="item.name"
                    :icon="item.icon"
                    :route="item.route"
                    :active="index === breadcrumbs.length - 1"
                />
            </template>
        </BreadcrumbContainer>
        <div class="flex w-full justify-end py-[0.31rem] mb-2 border-y-2 border-page-t dark:border-page-dt">
            <div id="buttons" class="flex items-center space-x-1 text-sm">
                <slot />
                <RouterLink :to="$view({ name: 'index' })">
                    <IconButton
                        :title="$t('home')"
                        class="text-white"
                        icon="refresh"
                        filled
                    />
                </RouterLink>
            </div>
        </div>
    </div>
</template>