import React from "react";
import PropTypes from "prop-types";
import { Typography } from "@mui/material";

const BankCard = ({ cardNumber, expirationDate, bankName, bankUser }) => (
  <div
    style={{
      border: "1px solid #d9d9d9",
      borderRadius: "10px",
      padding: "20px",
      backgroundColor: "#f0f0f0",
      width: "350px",
    }}
  >
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        flexDirection: "row",
      }}
    >
      <div>
        <Typography variant="body2">اطلاعات بانکی جهت واریز مبلغ</Typography>
        <Typography variant="h6" fontWeight={"bold"}>
          {bankName}
        </Typography>
      </div>

      <div>
        <img
          src="https://fs.noorgram.ir/xen/2020/12/953_f6253f3c48b7e2a782b3526bf4b80fbd.png"
          alt="Visa"
          width="50px"
        />
      </div>
    </div>

    <div style={{ fontSize: "18px", marginTop: "40px" }}>
      <Typography>شماره کارت {cardNumber}</Typography>
    </div>
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        marginTop: "20px",
      }}
    >
      <Typography>
        <div style={{ fontSize: "14px" }}>{bankUser}</div>
        <div style={{ fontSize: "18px" }}>{expirationDate}</div>
      </Typography>
    </div>
  </div>
);

BankCard.propTypes = {
  cardNumber: PropTypes.string.isRequired,
  expirationDate: PropTypes.string.isRequired,
};

export default BankCard;
