<template>
    <AppLayout title="My projects">
        <div class="container max-w-[1440px] mt-8">
            <div class="flex flex-1 w-full gap-5 mb-10">
                <MyProjects
                    :engineer="engineer"
                    :client="client"
                    :projects="projects"
                />
            </div>
        </div>
    </AppLayout>
</template>

<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import ServiceList from "@/Pages/Services/Engineer/Partials/ServiceList.vue";
import { onMounted, ref, computed } from "@vue/runtime-core";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
import { addUrlParam } from "@/composables/urlParams";
import MyProjects from "@/Pages/Projects/Client/Partials/Tabs/MyProjects";

const props = defineProps({
    engineer: Object,
    projects: Array,
    client: Object,

});

const tabs = ["services", "orders"];

const tabRefs = ref([]);

const navigateToQueryTab = () => {
    const params = new URLSearchParams(window.location.search);
    const tab = params.get("section")?.toLowerCase();
    if (tabs.includes(tab)) {
        const tabRef = tabRefs.value[tabs.indexOf(tab)];
        tabRef?.el?.click();
    }
};

onMounted(() => {
    navigateToQueryTab();
});
</script>
