Untitled

import React from 'react';
import HeaderWithoutMenu from "../../components/landing/header-without-menu";

import {
    EuiFlexGroup,
    EuiFlexItem,
    EuiCard,
    EuiIcon,
    EuiRadio
} from '@elastic/eui';
import Failed from "../../components/paymentnotif/failednotif";
import Sukses from "../../components/paymentnotif/suksesnotif";


const PaymentMethod = () => {

    const currentDate = new Date()
    const currentYear = currentDate.getFullYear()

    return (
        <EuiFlexItem className='blash-otp'>
            <HeaderWithoutMenu />
            <EuiFlexGroup  >
                <EuiFlexItem style={{ paddingTop: "100px", marginLeft: "20%", marginRight: "20%" }}>
                    <div className="card_payment">
                        <p style={{ fontWeight: 'bold', color: '#597191', paddingBottom: '2%' }}>PAYMENT METHOD</p>
                        <hr></hr>
                        <p style={{ color: '#597191', paddingTop: '2%', paddingBottom: '3%' }}>CHOOSE A PAYMENT METHOD</p>
                        <EuiFlexGroup gutterSize="l">

                            <EuiFlexItem className="card_icon">
                                <div>
                                    <input type="radio" name="gender" value="visa" checked></input>
                                </div>
                                <img img src='/static/assets/visa.png' className="img_payment" />
                                <p align="center" style={{ fontSize: "20px", color: "black", paddingBottom: "10px", fontWeight: "250" }}>
                                    Visa
                                </p>
                            </EuiFlexItem>
                            <EuiFlexItem className="card_icon">
                                <div>
                                    <input type="radio" name="gender" value="link"></input>
                                </div>
                                <img img src='/static/assets/linkaja.png' className="img_payment" />
                                <p align="center" style={{ fontSize: "20px", color: "black", paddingBottom: "10px", fontWeight: "250", paddingTop: "20px" }}>
                                    Link Aja
                                </p>

                            </EuiFlexItem>
                            <EuiFlexItem className="card_icon">
                                <div>
                                    <input type="radio" name="gender" value="brimo"></input>
                                </div>
                                <img img src='/static/assets/brimo.png' className="img_payment" />
                                <p align="center" style={{ fontSize: "20px", color: "black", paddingBottom: "10px", fontWeight: "250", paddingTop: "20px" }}>
                                    Brimo
                                </p>
                            </EuiFlexItem>
                        </EuiFlexGroup>
                        {
                        document.getElementById('visa').value = 'visa' ?
                            <Sukses /> :
                            <Failed />
                        }
                    </div>
                </EuiFlexItem>
            </EuiFlexGroup>
            <p style={{ color: '#597191', textAlign: 'center', paddingTop: '10%' }}>Copyright © {currentYear} Bank Rakyat Indonesia (Persero) Tbk.</p>
        </EuiFlexItem>
    )
}

export default PaymentMethod