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 { Flex, ScrollAreaAutosize, Tabs } from "@mantine/core"

export default function Servers() {
    const [currentTab, setCurrentTab] = useState<string | null>('0')

    return (
        <ScrollAreaAutosize w={'100%'} h={'100%'} p='sm'>
            <Flex gap='sm' direction='column'>
                <Tabs value={currentTab} onChange={setCurrentTab}>
                    <Tabs.List>
                        <Tabs.Tab value="0">Серверы</Tabs.Tab>
                        <Tabs.Tab value="1">IP-адреса</Tabs.Tab>
                        <Tabs.Tab value="3">Hardware</Tabs.Tab>
                        <Tabs.Tab value="4">Storages</Tabs.Tab>
                    </Tabs.List>

                    <Tabs.Panel value="0" pt='sm'>
                        <ServersView />
                    </Tabs.Panel>

                    <Tabs.Panel value="1" pt='sm'>
                        <ServerIpsView />
                    </Tabs.Panel>

                    <Tabs.Panel value="2" pt='sm'>
                        <ServerHardware />
                    </Tabs.Panel>

                    <Tabs.Panel value="3" pt='sm'>
                        <ServerStorage />
                    </Tabs.Panel>
                </Tabs>
            </Flex>

            {/* <BarChart
                    xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
                    series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
                    width={500}
                    height={300}
                /> */}
        </ScrollAreaAutosize>
    )
}