<template>
    <header class="app-header border-bottom py-3 px-4 text-purple d-flex align-items-center gap-2">
        <component :is="getIcon()" class="view-icon" />
        <h1 class="h4 text-purple m-0">{{ currentViewName }}</h1>
    </header>
</template>
<script>
import { useRoute } from "vue-router";
import { computed } from "vue";
import Icons from "@/components/icons";

export default {
    name: "AppHeader",
    setup() {
        const route = useRoute();

        const currentViewName = computed(() => route.name || "Unknown View");

        const getIcon = () => Icons[route.meta.icon] || Icons["dashboard"];

        return {
            currentViewName,
            getIcon
        };
    },
};
</script>
<style scoped>
.text-purple {
    color: #6b46c1;
}

.view-icon {
    height: 1.5em;
    /* Match approx height of .h4 (1.5rem) */
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
</style>