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

import {
  BenefitsSection,
  Footer,
  HeroSection,
  SocialProofSection,
} from '../../components/landing';
import { LandingThemeProvider } from '../../containers';
import { LandingSuccessStub } from '../../models/landing';
import landingSuccessStubJson from '../../../stubs/json/landing/success.json';

import { isBenefitsSectionData, isSocialProofSectionData } from './types';

const landingSuccessStub = landingSuccessStubJson as LandingSuccessStub;

const Page: FC = () => {
  return (
    <LandingThemeProvider>
      <Container
        w='full'
        maxWidth='container.xl'
        minH='100vh'
        padding={0}
        bg='white'
        centerContent
      >
        <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
          <HeroSection
            data={landingSuccessStub['body']['hero-section']}
            flexShrink={0}
          />
          <VStack as='main' flexGrow={1}>
            {landingSuccessStub.body.sections.map(({ type, ...data }, i) => {
              if (isBenefitsSectionData(type, data)) {
                return <BenefitsSection key={i} data={data} />;
              }
              if (isSocialProofSectionData(type, data)) {
                return <SocialProofSection key={i} data={data} />;
              }
            })}
          </VStack>
          <Footer />
        </VStack>
      </Container>
    </LandingThemeProvider>
  );
};

export default Page;