<script setup >
import { Icon } from '@iconify/vue';

const props = defineProps({
    title: String,
    breadcrumbs: Array ,
    icon: String,
    text: String,
    buttonBack: Boolean
});

const router = useRouter();

const handleBack = () => {
    router.back();
};
</script>

<template>
        <div class="px-6 py-4">
            <div class="d-flex justify-space-between align-center">
                <div class="d-flex align-center ga-2">
                    <v-btn
                        v-if="buttonBack"
                        icon
                        variant="text"
                        size="small"
                        @click="handleBack"
                    >
                        <Icon icon="solar:arrow-left-line-duotone" height="24" />
                    </v-btn>
                    <h5 class="text-h5">{{ title }}</h5>
                </div>
                <div class="d-flex align-center ga-2">
                    <router-link to="/" class="textSecondary lh-0">
                        <Icon icon="solar:home-2-line-duotone" height="20" />
                    </router-link>
                    <v-chip size="small" class="rounded-sm" color="primary">
                        {{ breadcrumbs?.map(item => item.text).join(' / ') }}
                    </v-chip>
                </div>
            </div>
        </div>
</template>

<style lang="scss">
.page-breadcrumb {
    .v-toolbar {
        background: transparent;
    }
}
</style>
