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

const Index = ({ min_deposit, max_withdrawal, currency }) => {
  const { translations } = useContext(Context) || {};

  return (
    <div className={styles?.contain || ''}>
      <div className={styles?.row || ''}>
        <p>{translate(translations, 'min_deposit', 'Min Deposit')}:</p>
        <strong>{min_deposit}</strong>
      </div>
      {max_withdrawal && (
        <div className={styles?.row || ''}>
          <p>{translate(translations, 'max_withdrawal', 'Max Withdrawal')}:</p>
          <strong>{max_withdrawal}</strong>
        </div>
      )}
      {currency && (
        <div className={styles?.row || ''}>
          <p>{translate(translations, 'currency_support', 'Currency Support')}:</p>
          <strong>{currency}</strong>
        </div>
      )}
    </div>
  );
};
Index.propTypes = {
  currency: PropTypes.string,
  max_withdrawal: PropTypes.string,
  min_deposit: PropTypes.string,
};
export default Index;
