<script setup>
import { Tab, TabGroup, TabList, TabPanels } from "@headlessui/vue";
import ServerTab from "../components/ServerTab.vue";
import ClientTab from "../components/ClientTab.vue";
import { LinkIcon, ServerIcon } from "@heroicons/vue/24/solid";

const tabItems = [
    {label:"Client", icon:LinkIcon, tabComponent:ClientTab},
    {label:"Server", icon:ServerIcon, tabComponent:ServerTab},
]

</script>

<template>
<div class="min-h-screen bg-black text-yellow-400">
    <header class="border-b border-yellow-400/20 py-6">
    <div class="container mx-auto px-6">
        <div class="flex items-center space-x-4">
        <div class="text-3xl font-black">
            <span class="text-yellow-400">RENDEZ</span>
            <span class="text-white">VOUS</span>
        </div>
        <div class="w-1 h-8 bg-yellow-400"></div>
        <span class="text-gray-400">Helps Peer-to-Peer Connections</span>
        </div>
    </div>
    </header>

    <div className="container mx-auto px-6">
        <TabGroup>
            <TabList class="flex flex-wrap gap-2 border-b border-yellow-400/20">
                <Tab v-for="tab in tabItems" as="template" :key="tab" v-slot="{ selected }">
                    <button class="flex items-center space-x-2 px-6 py-3 font-semibold transition-all duration-300 border-b-2"
                    :class="{ 'text-yellow-400 border-yellow-400': selected, 'text-gray-400 border-transparent hover:text-yellow-400 hover:border-yellow-400/50': !selected }">
                    <component :is="tab.icon" class="h-4 w-4"></component>
                    <span>{{ tab.label }}</span>
                    </button>
                </Tab>
            </TabList>
            <TabPanels class="mt-6 space-y-6" v-for="tab in tabItems" :key="tab.label">
                <component :is="tab.tabComponent"></component>
            </TabPanels>
        </TabGroup>
    </div>
</div>
</template>