/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable camelcase */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import Tooltip from '../../tooltip';
import AffiliateDisclaimerIcon from '../../../../images/icons/affiliate-disclaimer';
import styles from './affiliate-disclaimer.module.scss';

const AffiliateDisclaimer = ({
  showIcon = true,
  icon = <AffiliateDisclaimerIcon />,
  className = '',
  direction = 'bottom',
  content,
  title,
  minWidth = 32.9,
}) => {
  const { translations } = useContext(Context) || {};

  return (
    <div className={`${className || ''} ${styles.toolTip || ''}`}>
      <Tooltip
        content={
          content || (
            <div className={styles.content}>
              {translate(
                translations,
                '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 || translate(translations, '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;
