/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable camelcase */
import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import useTranslate from '~hooks/useTranslate/useTranslate';

import Tooltip from '../../tooltip';
import styles from './affiliate-disclaimer.module.scss';

const AffiliateDisclaimerIcon = lazy(() => import('../../../../images/icons/affiliate-disclaimer'));

const AffiliateDisclaimer = ({
  showIcon = true,
  icon = <Suspense fallback={<></>}><AffiliateDisclaimerIcon /></Suspense>,
  className = '',
  direction = 'bottom',
  content,
  title,
  minWidth = 32.9,
}) => (
  <div className={`${className || ''} ${styles.toolTip || ''}`}>
    <Tooltip
      content={
        content || (
          <div className={styles.content}>
            {useTranslate(
              'advertising_disclosure_content',
              `Advertising Disclosure: Irishluck.ie contains links to partner websites. When a visitor clicks a link and makes a purchase at a partner site, Irishluck is paid a commission. Affiliate links and commissions do not impact bonuses and come at no additional cost to players. Our opinion of the casino always remains unbiased in our recommendations.`
            )}
          </div>
        )
      }
      direction={direction}
      minWidth={minWidth}
    >
      {showIcon && icon}
      {title || useTranslate('affiliate_disclaimer_title', 'Advertising Disclosure')}
    </Tooltip>
  </div>
);

AffiliateDisclaimer.propTypes = {
  icon: PropTypes.string,
  className: PropTypes.string,
  showIcon: PropTypes.bool,
  direction: PropTypes.string,
  content: PropTypes.element,
  title: PropTypes.string,
  minWidth: PropTypes.number,
};

export default AffiliateDisclaimer;
