import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
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 = (props) => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.landing.footer.links',
  });

  const listData = [
    { to: '#', label: t('privacy-policy') },
    { to: '#', label: t('service-terms') },
    { to: '#', label: t('faq') },
  ];

  return (
    <PageSection
      as='footer'
      py={5}
      bg='gray.700'
      color='white'
      {...props}
    >
      <SiteLogo />
      <Copyright />
      <List spacing={2}>
        {listData.map(({ to, label }, i) => (
          <ListItem key={i}>
            <Link as={RouterLink} to={to}>
              {label}
            </Link>
          </ListItem>
        ))}
      </List>
    </PageSection>
  );
};