/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';
import { MdPhoneInTalk } from '@react-icons/all-files/md/MdPhoneInTalk';
import styles from './hotline.module.scss';

const FooterHotline = ({ showAsSeen = false, asSeenOn, helpText, phoneNum, template }) => {
  const AsSeenOn = showAsSeen ? loadable(() => import('../as-seen-on')) : null;

  return (
    <div
      className={`${styles?.footerHotline || ''} ${
        styles[template] ? styles[template] || '' : ''
      } ${showAsSeen && styles.hasAsSeenOn ? styles.hasAsSeenOn || '' : ''}`}
    >
      <div className={styles.helpContainer}>
        <div
          className={styles.helpText}
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{
            __html: helpText,
          }}
        />
        <div className={styles.phoneNum}>
          <MdPhoneInTalk title="Phone Icon" />
          {phoneNum}
        </div>
      </div>
      {showAsSeen && AsSeenOn && <AsSeenOn asSeenOn={asSeenOn} template={template} />}
    </div>
  );
};

FooterHotline.propTypes = {
  showAsSeen: PropTypes.bool,
  asSeenOn: PropTypes.shape({}),
  helpText: PropTypes.string,
  phoneNum: PropTypes.string,
  template: PropTypes.string,
};

export default FooterHotline;
