import React from 'react';
import * as Text from 'app/shared/components/text/text';
import cx from 'classnames';
import { FaqCategory } from 'app/modules/faq/store/faq.types';

const faqIconDictionary = {
  ['bunker adjustment']: 'icon-oil-drop',
  default: 'icon-question-circle',
  earnings: 'icon-dollar-circle', 
  emissions: 'icon-mi-footprint',
  ['finance & reporting']: 'icon-finance-report',
  forecast: 'icon-chart-line-up',
  payments: 'icon-payments',
};

export interface Props {
  categories: FaqCategory[];
  onClick: (elementName: string) => void;
}

export const FaqScrollMenu = ({ categories, onClick }: Props) => {
  return <>
    <div className="u-margin-top--big">
      <Text.Headline size='h2' extraClass='u-margin-bottom--none'>Select a topic</Text.Headline>
    </div>
    <div className={'c-faq__menu o-layout o-gutter-top--medium u-flex-wrap'}>
      {categories.map((category) => {
        const classes = cx('o-layout', 'c-faq__icon', 'u-margin-right--small', 
          faqIconDictionary[category.name.toLowerCase()] ?? faqIconDictionary.default
        );

        return <div
          key={category.id}
          className={'c-faq__menu-item o-layout o-gutter u-margin-right u-cursor--pointer u-margin-bottom--small'}
          onClick={() =>
            onClick(category.name)
          }
        >
          <div className="u-flex-column u-justify-content-center u-display--none u-display-md--flex">
            <i className={classes} />
          </div>
          <Text.Paragraph size="small" extraClass='c-faq__text u-margin-bottom--none'>{category.name}</Text.Paragraph>
        </div>;
      })
      }
    </div>
  </>;
};