<script setup lang="ts">
import { computed, getCurrentInstance } from 'vue';
import { useGeneralStore } from '../stores';

const general = useGeneralStore();
const category = getCurrentInstance()?.parent?.parent?.parent?.parent; // yes indeed

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

const searched = computed(() => {
    const term = general.cfgSearchTerm.toLowerCase();
    const categoryTitle = category?.props?.title as string | undefined;
    const res =
        props.title?.toLowerCase().includes(term) ||
        categoryTitle?.toLowerCase().includes(term);
    if (res === true && categoryTitle !== undefined) {
        general.cfgCategories.add(categoryTitle);
    }
    return res;
});
</script>

<template>
    <div v-if="searched" class="flex flex-row w-full p-2 gap-2 items-center">
        <div class="grow">{{ title }}</div>
        <slot />
    </div>
</template>
