import { useState } from 'react'
import { IRegion } from '../interfaces/fuel'
import { useStorages } from '../hooks/swrHooks'
import { Spinner } from '@fluentui/react-components'
import CustomTable from './CustomTable'

export default function ServerStorage() {
    const [selectedOption] = useState<IRegion | null>(null)

    const { storages, isLoading: serversLoading } = useStorages(selectedOption?.id, 0, 10)

    return (
        <>
            {serversLoading ?
                <Spinner />
                :
                <CustomTable data={storages} columns={[
                    { name: 'id', header: 'ID', type: 'number' },
                    { name: 'hardware_id', header: 'Hardware ID', type: 'number' },
                    { name: 'name', header: 'Название', type: 'string' },
                    { name: 'size', header: 'Размер', type: 'string' },
                    { name: 'storage_type', header: 'Тип хранилища', type: 'string' }
                ]} />
            }
        </>
    )
}