import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import {
  MdEco,
  MdMiscellaneousServices,
  MdPlace,
  MdHandshake,
} from 'react-icons/md';
import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';
import { CtaButton, PageSection } from '../';
import { ListItem } from './ListItem';

export const BenefitsSection: FC = () => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.landing.benefits-section',
  });

  const listData = [
    {
      Icon: MdEco,
      children: t('list.0'),
    },
    {
      Icon: MdMiscellaneousServices,
      children: t('list.1'),
    },
    {
      Icon: MdPlace,
      children: t('list.2'),
    },
    {
      Icon: MdHandshake,
      children: t('list.3'),
    },
  ];

  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}>
        {listData.map((props, i) => (
          <ListItem key={i} {...props} />
        ))}
      </List>
      <HStack w='full' justify='flex-end'>
        <CtaButton />
      </HStack>
    </PageSection>
  );
};