import React, { useState, useEffect } from 'react';

// stripe
import { loadStripe } from '@stripe/stripe-js';
import { CardElement, Elements, useStripe, useElements } from '@stripe/react-stripe-js';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import styleIdentifiers from './stripeInput.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  options: {};
}

export type StripeInputProps = StateProps & DispatchProps & OwnProps;

const StripeInput = (props: StripeInputProps) => {
  const { options } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  return (
    <div className={styles('stripe-input')}>
      <CardElement options={options} />
    </div>
  );
};

export default StripeInput;
