import React, { FC } from 'react';
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 = () => {
  return (
    <PageSection>
      <VStack w='full' spacing={2}>
        <Heading as='h2'>Преимущества экологичной автомойки</Heading>
        <Text>
          Откройте для себя преимущества наших услуг по химчистке автомобилей
        </Text>
      </VStack>
      <List display='flex' flexDirection='column' spacing={3}>
        {[
          {
            Icon: MdEco,
            children: 'Экологически безопасные продукты',
          },
          {
            Icon: MdMiscellaneousServices,
            children: 'Быстрое и эффективное обслуживание',
          },
          {
            Icon: MdPlace,
            children: 'Удобный мобильный доступ',
          },
          {
            Icon: MdHandshake,
            children: 'Надежный и заслуживающий доверия',
          },
        ].map((props, i) => (
          <ListItem key={i} {...props} />
        ))}
      </List>
      <HStack w='full' justify='flex-end'>
        <CtaButton />
      </HStack>
    </PageSection>
  );
};