import React from 'react'
import { Link } from 'react-router-dom'
import { Center, Flex, Heading, Button, VStack } from '@chakra-ui/react'

export default function NoGames() {
  return (
    <Flex align={'center'} bgGradient={'linear(to-br, #314755, #26a0da)'} height={'100vh'}>
      <Center w={'100%'}>
        <VStack spacing={4} align={'center'} margin={'auto'}>
          {<Heading as="h2">You have not added any games yet.</Heading>}
        <Button as={Link} to='/games/create' size='lg' variant='outline' fontSize='1.25rem'>
          Click here to add some!
        </Button>
        </VStack>
      </Center>
    </Flex>
  )
}
