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 AffiliateDisclaimer from '../affiliate-disclaimer';
import ReviewDisclaimerIcon from '../../../../images/icons/review-disclaimer';
import styles from './review-disclaimer.module.scss';

const ReviewDisclaimer = ({
  showIcon = true,
  icon = <ReviewDisclaimerIcon />,
  className = styles.reviewDisclaimer,
  direction = 'bottom',
  content = (
    <div className={styles.content}>
      Gambling, while enjoyable for many, can spiral into an addiction for some. PlayCasino believes
      in <a href="/">responsible gambling</a> and offers resources to help our users understand and
      manage the risks associated. Know the signs and ensure you play responsibly.
    </div>
  ),
  title,
  minWidth = 32.9,
}) => {
  const { translations } = useContext(Context) || {};

  return (
    <AffiliateDisclaimer
      showIcon={showIcon}
      title={
        title || translate(translations, 'review_disclaimer_text', 'Stay Informed. Stay Safe.')
      }
      content={content}
      icon={icon}
      className={className}
      direction={direction}
      minWidth={minWidth}
    />
  );
};

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

export default ReviewDisclaimer;
