import React from 'react';
import PropTypes from 'prop-types';
import NavigationLink from '../navigation-link/navigation-link';
import css from './footer.css';

const FooterList = ({ links, secondary, major, minor, region, inverse }) => (
  <ul className={css['ds-footer__link-list']}>
    {links.map(({ url, id, name, allowedRegions, ...otherProps }) => {
      const link = (
        <li key={url} id={id}>
          <NavigationLink
            href={url}
            text={name}
            secondary={secondary}
            major={major}
            minor={minor}
            inverse={inverse}
            {...otherProps}
          />
        </li>
      );

      if (allowedRegions) {
        if (allowedRegions.includes(region)) {
          return link;
        }
        // If the user is not in an allowed region, do not render the link.
        return null;
      }

      // If link is not regional, return it.
      return link;
    })}
  </ul>
);

FooterList.defaultProps = {
  secondary: false,
  major: false,
  minor: false,
  inverse: false,
  region: '',
};

FooterList.propTypes = {
  links: PropTypes.arrayOf(
    PropTypes.shape({
      url: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
      id: PropTypes.string,
      allowedRegions: PropTypes.arrayOf(PropTypes.string),
    }),
  ).isRequired,
  secondary: PropTypes.bool,
  major: PropTypes.bool,
  minor: PropTypes.bool,
  inverse: PropTypes.bool,
  region: PropTypes.string,
};

export default FooterList;
