import React from 'react';
import PropTypes from 'prop-types';
import styles from './tnc.module.scss';

import Collapse from '~atoms/collapse';

const Tnc = ({
  hasCollapse = true,
  onlyMobile = true,
  onlyDesktop = true,
  buttonText = 'Terms and Conditions Apply',
  contentText = '18+ New Players only. Play responsibly.',
  initOpen = false,
  operator,
  isFixed = false,
}) => (
  <>
    {hasCollapse ? (
      <Collapse
        onlyMobile={onlyMobile}
        onlyDesktop={onlyDesktop}
        buttonText={buttonText}
        contentText={contentText}
        initOpen={initOpen}
        operator={operator}
      />
    ) : (
      <div className={isFixed && styles.isFixed ? styles.isFixed : ''}>{contentText}</div>
    )}
  </>
);

Tnc.propTypes = {
  hasCollapse: PropTypes.bool,
  isFixed: PropTypes.bool,
  buttonText: PropTypes.string,
  contentText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  onlyMobile: PropTypes.bool,
  onlyDesktop: PropTypes.bool,
  initOpen: PropTypes.bool,
  operator: PropTypes.shape({
    short_name: PropTypes.string,
    type: PropTypes.string,
    links: PropTypes.shape({
      tnc: PropTypes.string,
      main: PropTypes.string,
    }),
  }),
};

export default Tnc;
