<script setup>
import { TabGroup, TabList, Tab, TabPanels, TabPanel} from '@headlessui/vue'
import { KeyIcon, BoltIcon, ShieldCheckIcon, UserPlusIcon, UsersIcon, ClipboardDocumentListIcon} from '@heroicons/vue/24/solid'

import TabCreateUser from '../components/tabs/TabCreateUser.vue'
import TabProofOfWork from '../components/tabs/TabProofOfWork.vue'
import TabAddUser from '../components/tabs/TabUsers.vue'
import TabSigningRequests from '../components/tabs/TabSigningRequests.vue'

const tabItems = [
    {label:"Create User", icon:KeyIcon, tabComponent:TabCreateUser},
    {label:"Proof of Work", icon:BoltIcon, tabComponent:TabProofOfWork},
    {label:"Users", icon:UserPlusIcon, tabComponent:TabAddUser},
    {label:"Signing Requests", icon:ClipboardDocumentListIcon, tabComponent:TabSigningRequests},
]

</script>

<template>
<div class="min-h-screen bg-black w-screen text-yellow-400">
    <header className="border-b border-yellow-400/20 py-6">
        <div className="container mx-auto px-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <div className="text-3xl font-black">
                <span className="text-yellow-400">LOCK</span>
                <span className="text-white">BOX</span>
              </div>
              <div className="w-1 h-8 bg-yellow-400"></div>
              <span className="text-gray-400">Secure ECDSA Keypair Management</span>
            </div>
          </div>
        </div>
      </header>

    <div className="container mx-auto px-6">
    <TabGroup>
        <TabList class="flex flex-wrap gap-2 mb-8 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 px-40" v-for="tab in tabItems" :key="tab.label">
            <component :is="tab.tabComponent"></component>
        </TabPanels>
    </TabGroup>
    </div>
</div>
</template>

<style scoped>
/* button {
  transition: background 0.2s, color 0.2s;
} */
</style>
