import React, { FC } from 'react';
import { Link, List, ListItem } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';
import { SiteLogo, PageSection } from '../';
import { Copyright } from './Copyright';

export const Footer: FC = () => {
  return (
    <PageSection as='footer' py={5} bg='gray.700' color='white'>
      <SiteLogo />
      <Copyright />
      <List spacing={2}>
        {[
          { to: '#', label: 'Политика конфиденциальности' },
          { to: '#', label: 'Условия обслуживания' },
          { to: '#', label: 'FAQ' },
        ].map(({ to, label }, i) => (
          <ListItem key={i}>
            <Link as={RouterLink} to={to}>
              {label}
            </Link>
          </ListItem>
        ))}
      </List>
    </PageSection>
  );
};