import { Typography } from "@mui/material";
import { Box } from "@mui/system";
import { useSelector } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";

export const ViewBankAccount = () => {
  const { userProfile } = useSelector((state) => state.userSlice);
  const userData = [
    ["نام بانک", userProfile.userBankInfo?.bankName],
    ["شماره کارت", userProfile.userBankInfo?.card],
    ["شماره حساب", userProfile.userBankInfo?.account],
    ["شماره شبا", userProfile.userBankInfo?.shaba],
  ];
  return (
    <Box>
      <Grid container p={SPACING.MEDIUM} direction="column">
        <Grid>
          <Typography variant="body1" fontWeight={"bold"}>
            اطلاعات حساب بانکی
          </Typography>
        </Grid>
        <Grid
          container
          justifyContent="space-between"
          gap={SPACING.SMALL}
          mt={SPACING.MEDIUM}
        >
          {userData.map((item, i) => (
            <Grid
              container
              gap={SPACING.SMALL}
              key={i}
              flexGrow="1"
              flexBasis="250px"
            >
              <Typography variant="body2" fontWeight={"bold"}>
                {item[0] + ":"}
              </Typography>
              <Typography variant="body2">
                {item[1] ? item[1] : "نامشخص"}
              </Typography>
            </Grid>
          ))}
        </Grid>
      </Grid>
    </Box>
  );
};
