<template>
    <ContentLayout :title="layout.title">
        <template #action-before>
            <div class="flex items-center gap-[1px] w-[200px]">
                <input type="text" v-model="searchQuery" placeholder="Search" class="w-full" />
            </div>
        </template>
        <template #body>
            <div class="space-y-8">
                <div v-for="section in filteredData" :key="section.category">
                    <h1 class="text-xl text-primary-800 font-semibold mb-[15px]">{{ section.category }}</h1>
                    <div class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-4">
                        <RouterLink v-for="item in section.items" :key="item.name" :to="item.to">
                            <Card :icon="item.icon" :name="item.name" />
                        </RouterLink>
                    </div>
                </div>
            </div>
        </template>
    </ContentLayout>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import Card from "./Card.vue";

const layout = ref({
    title: [
        {
            name: "Setup",
        },
    ],
});

const settingsData = [
    {
        category: "Administration Setting",
        items: [
            {
                name: "Departments",
                icon: "HousePlus",
                to: "/setup/departments",
            },
            {
                name: "Document Type",
                icon: "File",
                to: "",
            },
        ],
    },
];

const searchQuery = ref("");

const filteredData = computed(() => {
    const query = searchQuery.value.toLowerCase();
    return settingsData
        .map((section) => {
            const filteredItems = section.items.filter((item) => {
                // const hasAccess = hasPermission(item.permission);
                // if (!hasAccess) return false;
                if (!query) return true;
                return item.name.toLowerCase().includes(query);
            });
            if (filteredItems.length > 0) {
                return {
                    ...section,
                    items: filteredItems,
                };
            }
            return null;
        })
        .filter((section) => section !== null);
});
</script>
