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

import { CtaButton, PageSection } from '../';

import { ReviewsSlider } from './ReviewsSlider';
import { SocialProofSectionProps } from './types';

export const SocialProofSection: FC<SocialProofSectionProps> = ({
  data: { heading } = {},
}) => {
  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });

  return (
    <PageSection>
      <Heading as='h2'>{t(heading)}</Heading>
      <ReviewsSlider />
      <HStack w='full' justify='flex-end'>
        <CtaButton />
      </HStack>
    </PageSection>
  );
};