import { PropTypes } from "prop-types";
// import { Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import BankCard from "../../../../components/bank-card/BankCard";
// import { Typography } from "@mui/material";

export const BankAccountInformation = ({
  card,
  shaba,
  info,
  price,
  priceText,
  bankName,
  bankUser,
}) => {
  return (
    <Grid
      container
      alignItems={"start"}
      pl={SPACING.SMALL}
      gap={SPACING.SMALL}
      mt={SPACING.SMALL}
    >
      <Grid>
        <BankCard
          bankName={"بانک " + bankName}
          bankUser={bankUser}
          cardNumber={card}
          expirationDate={"IR" + shaba}
        />
      </Grid>

      {/* <Grid>
        <Grid>
          <Typography variant={"body1"} fontWeight={"bold"} color={"primary"}>
            اطلاعات بانکی جهت واریز مبلغ:
          </Typography>
        </Grid>

        <Grid container gap={SPACING.MEDIUM}>
          <Grid>
            <Typography variant={"body2"}>شماره کارت</Typography>
            <Typography variant={"body2"} fontWeight={"bold"}>
              {card}
            </Typography>
          </Grid>
          <Grid>
            <Typography variant={"body2"}>شماره شبا</Typography>
            <Typography variant={"body2"} fontWeight={"bold"}>
              {shaba}
            </Typography>
          </Grid>
          <Grid>
            <Typography variant={"body2"} color="primary">
              مبلغ قابل پرداخت
            </Typography>
            <Typography variant={"body2"} color="primary" fontWeight={"bold"}>
              {price?.toLocaleString()} ریال
            </Typography>
          </Grid>
          <Grid>
            <Typography variant={"body2"} color="primary">
              مبلغ قابل پرداخت به حروف
            </Typography>
            <Typography variant={"body2"} color="primary" fontWeight={"bold"}>
              {priceText}
            </Typography>
          </Grid>
        </Grid>
        <Grid>
          <Typography variant={"body1"} fontWeight={"bold"}>
            {info}
          </Typography>
        </Grid>
      </Grid> */}
    </Grid>
  );
};

BankAccountInformation.propTypes = {
  card: PropTypes.string,
  shaba: PropTypes.string,
  info: PropTypes.string,
  price: PropTypes.any,
  priceText: PropTypes.any,
};
