import React, { useEffect } from 'react'
import { BrowserRouter, Route, Redirect, Switch, Link, useHistory } from 'react-router-dom'
import {
  Container,
  Heading,
  Button,
  Segment,
  Message,
  Form,
  Input,
  Transition,
  Select,
  Checkbox,
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  VStack,
  Stack,
  StackDivider,
  Box,
  Text,
  List, ListItem, ListIcon, OrderedList, UnorderedList,
  Table,
  Thead,
  Tbody,
  Tfoot,
  Tr,
  Th,
  Td,
  TableCaption,
  Flex,
  HStack,
  Wrap,
} from '@chakra-ui/react'
import {
  Divider,
} from 'semantic-ui-react'


const Feature = ({ title, desc, ...rest }) => {
  return (
    <Box p={5} shadow="md" borderWidth="1px" {...rest}>
      <Heading fontSize="xl">{title}</Heading>
      <Text mt={4}>{desc}</Text>
    </Box>
  )
}


const Index = () => {
  const history = useHistory()

  return (
    <Container>
      <Divider hidden />
      <Wrap justify="right">
        <Button size="xs" colorScheme="blue" variant="outline"
                onClick={() => history.push('/sign-in') }
        >
          SIGN IN
        </Button>
        <Button size="xs" colorScheme="blue"
                onClick={() => history.push('/sign-up') }
        >
          SIGN UP
        </Button>
      </Wrap>

      <Heading>The Infrastructure Cloud</Heading>
      <Text>Easily deploy cloud servers, bare metal, and storage worldwide!</Text>

      <Divider hidden />


      <Stack  spacing={8}>
        <Feature
          title='Cloud Compute'
          desc='Powerful compute instances with Intel CPUs and 100% SSD storage.'
        />

        <Feature
          title='Bare Metal'
          desc='Fully automated dedicated servers with zero virtualization layer.'
        />
      </Stack >

      <Divider hidden />

      <Stack  spacing={8}>
        <Feature
          title='Block Storage'
          desc='Fast SSD-backed scalable and redundant storage with up to 10TB volumes.'
        />

        <Feature
          title='Dedicated Cloud'
          desc='Dedicated cloud compute instances without the noisy neighbors.'
        />
      </Stack >

      <Divider hidden />
    </Container>
  )
}

export default Index