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" />,
  showLinks=true,
  template,
  customClass='',
}) => {
  const menuArray = getFirstModuleByName(section, 'menu');

  return (
    <div className={`${styles?.linkMenuContainer || ''} ${customClass && styles[customClass]} `}>
      <div className={styles?.linkMenuContent || ''}>
        <LinkList lists={menuArray} listIcon={listIcon} template={template} gtmClass="link-menu-gtm" showLinks={showLinks} />
      </div>
    </div>
  );
};

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

export default LinkMenu;
