import React from 'react'
import {
    Spinner,
    Container,
    Center,
    useColorMode
} from '@chakra-ui/react'
import { useThemeManager } from '../../hooks/useThemeManager';

export const PageLoader = () => {
    const { isLightVariant } = useThemeManager();
    
    return (
        <Container maxW="container.xl">
            <Center h="300px">
                <Spinner
                    thickness="4px"
                    speed="0.65s"
                    emptyColor={isLightVariant ? 'gray.200' : 'gray.600'}
                    color={isLightVariant ? 'blue.500' : 'blue.300'}
                    size="xl"
                />
            </Center>
        </Container>
    )
}