import React from 'react';
import PropTypes from 'prop-types';
import NavigationLink from '../navigation-link/navigation-link';
import 'reset-css/reset.css';
import '../grid/grid';
import '../media-queries/media-queries';
import css from './account-navigation.css';

const renderListItem = item => {
  return (
    <li
      className={css['ds-masthead-account-list__item']}
      key={item.url.toString()}
    >
      <NavigationLink href={item.url} text={item.name} />
    </li>
  );
};

const AccountNavigation = ({ accountData, userType }) => (
  <nav className={css['ds-masthead-account-lists']}>
    {userType === 'subscriber' && (
      <div className='subscriber-exclusives'>
        <h3 className={css['ds-masthead-account-subheading']}>
          Included in your subscription
        </h3>
        <ul
          className={
            css['ds-masthead-account-main-list--subscriber-exclusives']
          }
        >
          {accountData['subscriber-exlusives'].map(item =>
            renderListItem(item),
          )}
        </ul>
      </div>
    )}
    <ul className={css['ds-masthead-account-list']}>
      {accountData['account-logged-in'].map(item => renderListItem(item))}
    </ul>
    <ul className={css['ds-masthead-account-main-list']}>
      {accountData['account-logged-in-main'].map(item => renderListItem(item))}
    </ul>
  </nav>
);

AccountNavigation.propTypes = {
  accountData: PropTypes.objectOf(PropTypes.array).isRequired,
  userType: PropTypes.string,
};

AccountNavigation.defaultProps = {
  userType: null,
};

export default AccountNavigation;
