import * as React from 'react';
import * as classNames from 'classnames';
import * as styles from './TermsAndSubmit.scss';
import * as Loader from 'wix-style-react/dist/src/Loader';
import Translate from './../../Translate/Translate';
import PayPalIcon from './../icons/PayPalIcon/PayPalIcon';

interface ITermsAndSubmitProps {
  termsAndConditionsLink?: string;
  handleTermsStatusChange?: (e: any) => void;
}

export default (props: ITermsAndSubmitProps) => {
  return (
    <div className={styles.terms} tabIndex={0}>
      <input
        id="accept-terms"
        type="checkbox"
        data-hook="wcn-wallet-payment-terms-input"
        onChange={props.handleTermsStatusChange}
        tabIndex={-1}
        ref={(node) => this.node = node}
      />
      <label htmlFor="accept-terms"><Translate forKey="terms.conditions.agree"/> </label>
      <a
        className={classNames(styles.termsLink, !props.termsAndConditionsLink && styles.disabledLink)}
        href={props.termsAndConditionsLink}
      >
        <Translate forKey="terms.conditions" />
      </a>
    </div>
  );
};