import { Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { getFaUserRole } from "../../../../utils/getFaUserRole";
import { formatTime } from "../../../../utils/formatTime";

export const SlaughterPaymentDetails = ({ item }) => {
  return (
    <Grid container width="100%">
      {item?.cardHolderPan ? (
        <>
          <Grid container width="100%" justifyContent="space-between">
            <Typography>نوع پرداخت: </Typography>
            <Typography color="primary">درگاه پرداخت</Typography>
          </Grid>

          <Grid container width="100%" justifyContent="space-between">
            <Typography>شماره کارت: </Typography>
            <Typography>{item?.cardHolderPan}</Typography>
          </Grid>
        </>
      ) : (
        <Grid container width="100%" justifyContent="space-between">
          <Typography>نوع پرداخت: </Typography>
          <Typography color="primary">دستی</Typography>
        </Grid>
      )}
      <Grid container width="100%" justifyContent="space-between">
        <Typography>تاریخ پرداخت: </Typography>
        <Typography>{formatTime(item.date)}</Typography>
      </Grid>

      <Grid container width="100%" justifyContent="space-between">
        <Typography>پرداخت کننده: </Typography>
        <Typography>{item.payer}</Typography>
      </Grid>

      <Grid container width="100%" justifyContent="space-between">
        <Typography>نقش: </Typography>
        <Typography>{getFaUserRole(item.role)}</Typography>
      </Grid>

      <Grid container width="100%" justifyContent="space-between">
        <Typography>مبلغ پرداختی: </Typography>
        <Typography>{item?.totalAmount?.toLocaleString()} ﷼</Typography>
      </Grid>
    </Grid>
  );
};
