import { useState } from 'react'
import "../css/Banner.css"
import "../css/Card.css";
import "../css/Buttons.css";
import eth from "../eth/eth.js"

function CardBeneficiary(props) {

async function withdraw(){
  console.log(props.id);
  var response = await eth.contractWithSigner.withdrawBeneficiary(props.id);

}

  return (
    <div className="CardBeneficiary">
      <div>
        <h1>ID: {props.id}</h1>
        <hr/>
      </div>
        <table>
          <thead></thead>
          <tbody>
            <tr>
              <td>Testator</td>
              <td>{props.testator}</td>
            </tr>
            <tr>
              <td>Beneficiary</td>
              <td>{props.beneficiary}</td>
            </tr>
            <tr>
              <td>Withdraw Date</td>
              <td>{props.withdrawDate}</td>
            </tr>
            <tr>
              <td>Amount</td>
              <td>{props.amount}</td>
            </tr>
          </tbody>
        </table>
        <br/>
        <div className="btnArea">
          <button className="withdrawBtn" onClick={withdraw}>Withdraw</button>
        </div>
    </div>
  )
}

export default CardBeneficiary