/* eslint-disable react/no-danger */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { translate } from '../../../../helpers/getters';
import LazyImage from '../../../../hooks/lazy-image';
import LinkList from '../../../molecules/link-list';
import { Context } from '../../../../context/MainProvider';
import styles from './license.module.scss';

const FooterLicense = ({
  gamblingText,
  socialIcons,
  template,
  logo,
  securityIcon,
  imgWidth,
  imgHeight,
}) => {
  const { translations } = useContext(Context) || {};

  return (
    <div className={`${styles?.license || ''} ${styles[template] ? styles[template] || '' : ''}`}>
      <div className={styles.logo}>
        <LazyImage
          alt="Site footer logo"
          width={imgWidth || 182}
          height={imgHeight || 48}
          src={logo}
        />
      </div>
      <div className={styles?.security || ''}>
        <LazyImage alt="Security icon" width="26" height="20" src={securityIcon} />
        <span className={styles?.securityText || ''}>
          {translate(translations, 'licensed_casinos', 'We only list licensed casinos')}
        </span>
      </div>
      {socialIcons && (
        <div className={styles?.socialIcons || ''}>
          <LinkList
            width={40}
            height={40}
            singleList
            imageOnly
            lists={socialIcons}
            gtmClass="mobile-menu-gtm logo-cta"
          />
        </div>
      )}
      {template !== 'templateOne' && gamblingText && (
        <div
          className={styles?.gamblingText || ''}
          dangerouslySetInnerHTML={{ __html: gamblingText }}
        />
      )}
    </div>
  );
};

FooterLicense.propTypes = {
  gamblingText: PropTypes.string,
  socialIcons: PropTypes.shape({}),
  template: PropTypes.string,
  logo: PropTypes.string,
  securityIcon: PropTypes.string,
  imgWidth: PropTypes.number,
  imgHeight: PropTypes.number,
};

export default FooterLicense;
