import styles from "./transact-pin.module.scss"
import { useState } from "react"

interface TransactionPinProps {
  closeModal: () => void;
}

const TransactionPin = ({ closeModal }: TransactionPinProps) => {
    const [enteredPin, setEnteredPin] = useState<string>()

  return (
    <div className={ styles["dash__modal"] }>
           <div className={styles['dash__modal__content']}>
        <div onClick={closeModal} className={styles['dash__modal__content--close']}>
          Close
        </div>
        <div className={styles['dash__modal__content--details']}>
          <div className={styles['dash__modal__content--details--header']}>
            <h2>Transaction Pin</h2>
            <p>
              For security reasons, you will need to enter your transaction pin to complete this withdrawal
            </p>
            <label htmlFor="trans-pin">Transaction Pin *</label>
            <input 
                type="number"
                placeholder="Please enter your transaction pin"
                value={enteredPin}
                onChange={(e) => setEnteredPin(e.target.value)}
            />

          </div>
          <div className={styles['dash__modal__content--details--btn']}>
            <button>Confirm Transaction Pin</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default TransactionPin