import { useState } from "react"
import ServersView from "../components/ServersView"
import ServerIpsView from "../components/ServerIpsView"
import ServerHardware from "../components/ServerHardware"
import ServerStorage from "../components/ServerStorages"
import { Tab, TabList } from "@fluentui/react-components"

export default function Servers() {
    const tabs = [{
        id: 'servers',
        name: 'Серверы',
        content: <ServersView />
    },
    {
        id: 'ips',
        name: 'IP-адреса',
        content: <ServerIpsView />
    },
    {
        id: 'hardware',
        name: 'Hardware',
        content: <ServerHardware />
    },
    {
        id: 'storage',
        name: 'Хранилище',
        content: <ServerStorage />
    }
    ]

    const [selectedTab, setSelectedTab] = useState<string | unknown>(tabs[0].id)

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            height: '100%',
            gap: '1rem',
            padding: '1rem'
        }}>
            <TabList selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
                {tabs.map(tab => (
                    <Tab value={tab.id}>{tab.name}</Tab>
                ))}
            </TabList>

            <div>
                {tabs.find(tab => tab.id === selectedTab)?.content}
            </div>
        </div>

    )
}