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

interface XlSpinnerProps {
    size?: string;
}

export const XlSpinner: React.FC<XlSpinnerProps> = ({ size = 'xl' }) => {
    const { colorMode } = useColorMode();
    
    return (
        <Container maxW="container.xl">
            <Center h={size === 'sm' ? 'auto' : '300px'}>
                <Spinner
                    thickness="4px"
                    speed="0.65s"
                    emptyColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
                    color={colorMode === 'light' ? 'blue.500' : 'blue.300'}
                    size={size}
                />
            </Center>
        </Container>
    )
}