/* eslint-disable react-hooks/exhaustive-deps */
import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import PropTypes from 'prop-types';

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

const FooterNavigation = ({ section, isStorybook = false }) => {
  const menuArray = getFirstModuleByName(section, 'menu');
  return (
    menuArray?.children?.length > 0 && (
      <div
        className={`${styles?.footerLinks || ''} 
          ${isStorybook ? styles?.isStoryBook : ''} 
          ${styles?.showFooterNav || ''}
          ${styles[section.style]}
          `}
      >
        <LinkList
          showListTitle={false}
          singleList
          lists={menuArray}
          width={48}
          height={48}
          gtmClass="mobile-menu-gtm"
        />
      </div>
    )
  );
};

FooterNavigation.propTypes = {
  section: PropTypes.shape({
    modules: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.string,
      })
    ),
  }).isRequired,
  isStorybook: PropTypes.bool,
};

export default FooterNavigation;
