import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Container, Heading, VStack } from '@chakra-ui/react';

import { LandingThemeProvider } from '../../containers';
import { OrderForm } from '../../components/order-form';

const Page: FC = () => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.order-create',
  });

  return (
    <LandingThemeProvider>
      <Container
        w='full'
        maxWidth='container.xl'
        minH='100vh'
        padding={0}
        bg='white'
        centerContent
      >
        <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
          <Heading textAlign='center' mt={4}>{t('title')}</Heading>
          <OrderForm />
        </VStack>
      </Container>
    </LandingThemeProvider>
  );
};

export default Page;