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

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

import { ListItem } from './ListItem';
import { BenefitsSectionProps } from './types';
import { iconsMap } from './helper';

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

  return (
    <PageSection>
      <VStack w='full' spacing={2}>
        <Heading as='h2'>{t(heading)}</Heading>
        <Text>{t(description)}</Text>
      </VStack>
      <List display='flex' flexDirection='column' spacing={3}>
        {list.map((itemKey, i) => (
          <ListItem key={i} Icon={iconsMap[itemKey]}>
            {t(itemKey)}
          </ListItem>
        ))}
      </List>
      <HStack w='full' justify='flex-end'>
        <CtaButton />
      </HStack>
    </PageSection>
  );
};