import * as React from 'react';
import { ItemAdditional } from '@assets/js-menu/ItemAdditional';
import { IPage } from '@assets/js-menu/GraphQLInterfaces';
import { getConfigData } from '@assets/js-menu/hooks/getConfig';


export const ListAdditional = (props: any) => {
   const { config, translations } = getConfigData();

   let items = [];

   if (!props.selectedItem && config.activecs) {
      items = [
         <a href={config.sellersUrl} className="nav-link">{translations?.sellers}</a>,
         <div className="responsive-switcher">
            <a href="" data-focus-opener="currency-switcher" className="header-currency">
               {translations?.activeCurrency}
            </a>
         </div>
      ];
   }

   return (
      <React.Fragment>
         <div className="resp-menu-additional">
            <ul className="nav list-unstyled">
               {props.pages.map((page: IPage, key: number) => <ItemAdditional key={key} page={page}/>)}
               {items.map((link, index) =>
                  <li className="nav-item nav-item-additional" key={index}>{link}</li>
               )}
            </ul>
         </div>
      </React.Fragment>
   );
};
