import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';

import { DemoVideoPosterImg } from '../../../assets/images';
import { CtaButton, SiteLogo, PageSection } from '../';

type HeroSectionProps = Pick<BoxProps, 'flexShrink'>;

export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.landing.hero-section',
  });

  return (
    <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
      <Box
        as='video'
        src={`${__webpack_public_path__}/remote-assets/demo.mp4`}
        poster={DemoVideoPosterImg}
        autoPlay
        loop
        muted
        w='full'
        h='full'
        pos='absolute'
        objectFit='cover'
        filter='brightness(50%)'
        zIndex={-1}
      />
      <PageSection
        h='full'
        minH='375px'
        maxH='1000px'
        py={10}
        justifyContent='center'
        alignItems='center'
        spacing={8}
      >
        <Center>
          <SiteLogo />
        </Center>
        <VStack spacing={4}>
          <Heading
            as='h1'
            textAlign='center'
            color='white'
            __css={{ textWrap: 'balance' }}
          >
            {t('headline')}
          </Heading>
          <Text
            textAlign='center'
            __css={{ textWrap: 'balance' }}
            color='white'
          >
            {t('description')}
          </Text>
        </VStack>
        <CtaButton size='lg' />
      </PageSection>
    </Box>
  );
};