import React from 'react';
import PropTypes from 'prop-types';
import { FaChevronRight } from '@react-icons/all-files/fa/FaChevronRight';

import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
import { getFirstModuleByName } from 'gatsby-core-theme/src/helpers/getters';
import styles from './link-menu.module.scss';

const LinkMenu = ({ section, listIcon = <FaChevronRight title="Right-pointing Arrow Icon" /> }) => {
  const menuArray = getFirstModuleByName(section, 'menu');
  return (
    <div className={styles?.linkMenuContainer || ''}>
      <div className={styles?.linkMenuContent || ''}>
        <LinkList lists={menuArray} listIcon={listIcon} gtmClass="link-menu-gtm" />
      </div>
    </div>
  );
};

LinkMenu.propTypes = {
  listIcon: PropTypes.element,
  section: PropTypes.shape({
    modules: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.string,
      })
    ),
  }).isRequired,
};

export default LinkMenu;
