<template>
    <div v-if="engineer.hierarchicalCategories.category" class="mt-1.5">
        <div
            class="border-[3px] border-blue-200 bg-green-300 py-[12px] px-[15px] inline-flex rounded-2xl gap-2.5"
        >
            <span class="text-sm text-white">
                {{ engineer.hierarchicalCategories?.category?.name }}
            </span>
        </div>
    </div>
    <div class="flex w-full flex-wrap gap-2.5 mt-1.5">
        <Badge
            v-for="subCategory in engineer.hierarchicalCategories
                .sub_categories"
            :key="`selected_sub_category_${subCategory.id}`"
            color="blue"
        >
            {{ subCategory.name }}
        </Badge>
    </div>
</template>

<script>
import Badge from "@/components/General/Badge";

export default {
    props: {
        engineer: {
            type: Object,
            required: true,
        },
    },
    components: {
        Badge,
    },
};
</script>
