text: import { media, mixins, theme } from '@styles';
  
  import { FormattedIcon } from '@components/icons';
  import PropTypes from 'prop-types';
  import React from 'react';
  import { socialMedia } from '@config';
  import styled from 'styled-components';
  
  const { colors, fontSizes, fonts } = theme;
  
  const StyledContainer = styled.footer`
    ${mixins.flexCenter};
    flex-direction: column;
    padding: 15px;
    text-align: center;
    height: auto;
    min-height: 70px;
  `;
  const StyledSocial = styled.div`
    color: ${colors.lightSlate};
    width: 100%;
    max-width: 270px;
    margin: 0 auto 10px;
    display: none;
    ${media.tablet`display: block;`};
  `;
  const StyledSocialList = styled.ul`
    ${mixins.flexBetween};
    padding: 0;
    margin: 0;
    list-style: none;
  `;
  const StyledSocialLink = styled.a`
    padding: 10px;
    svg {
      width: 20px;
      height: 20px;
    }
  `;
  const StyledMetadata = styled.div`
    font-family: ${fonts.SFMono};
    font-size: ${fontSizes.xs};
    line-height: 1;
  `;
  const StyledGitHubLink = styled.a`
    color: ${colors.lightSlate};
    padding: 10px;
  `;
  
  const Footer = () => (
    <StyledContainer>
      <StyledSocial>
        <StyledSocialList>
          {socialMedia &&
            socialMedia.map(({ name, url }, i) => (
              <li key={i}>
                <StyledSocialLink
                  href={url}
                  target="_blank"
                  rel="nofollow noopener noreferrer"
                  aria-label={name}>
                  <FormattedIcon name={name} />
                </StyledSocialLink>
              </li>
            ))}
        </StyledSocialList>
      </StyledSocial>
      <StyledMetadata tabindex="-1">
        <StyledGitHubLink
          href="https://github.com/bchiang7/v4"
          target="_blank"
          rel="nofollow noopener noreferrer">
          <div>Theme Credit: Brittany Chiang</div>
        </StyledGitHubLink>
      </StyledMetadata>
    </StyledContainer>
  );
  
  Footer.propTypes = {
    githubInfo: PropTypes.object,
  };
  
  export default Footer;
  