import React from 'react';

import { PageWrap } from '../PageWrap';
import { Link } from '../Link';
import { Paragraph } from '../Paragraph';
import * as sc from './styles';
import { FooterProps } from './definitions';

export const Footer = ({
  variant,
  title,
  links,
  ...restProps
}: FooterProps) => {
  return (
    <PageWrap {...restProps}>
      <sc.Wrapper className="pui-footer" variant={variant}>
        <sc.Inner>
          <Paragraph as="span" mb={0} fontSize="1">
            &copy; {new Date().getFullYear()} {title || 'Polymath Inc'}
          </Paragraph>
          <sc.Links variant={variant}>
            {links?.map((link, i) => (
              <li key={i}>
                <Link key={`footer-link-${i}`} href={link.url}>
                  {link.content}
                </Link>
              </li>
            ))}
          </sc.Links>
        </sc.Inner>
      </sc.Wrapper>
    </PageWrap>
  );
};

Footer.defaultProps = {
  variant: 'default',
  links: [
    {
      content: 'Terms Of Service',
      url: 'https://polymath.network/terms-of-service',
    },
    {
      content: 'Privacy Policy',
      url: 'https://polymath.network/privacy-policy',
    },
  ],
};
