import { Box } from "@mui/material";

const StatsCard = ({ records, data, part }) => {
  console.log("Records : ", records);
  // console.log("data ================ : ", data);
  const keys = Object.keys(data);
  // console.log("Part : ", part);
  // //   const Values = Object.Values(data)
  // console.log("values ====== ", Object.values(data));
  const values = Object.values(data);
  // console.log("keys : ", keys);
  const PartCKeysToCapture = [
    "barcode",
    "exam_centre_code",
    "booklet_serial_no",
    "subject_code",
    "marks",
    "manual_verification_needed",
    "error",
    "error_reason",
    "error"
  ];
  const PartAKeysToCapture = [
    "barcode",
    "exam_centre_code",
    "booklet_serial_no",
    "subject_code",
    "manual_verification_needed",
    "error",
    "error_reason",
    "error",
    "type",
  ];
  return (
    <>
      <Box class="d-flex flex-md-row flex-column justify-content-center align-items-center gap-2 my-5 border border-dark rounded">
        <Box class="text-left d-flex flex-column justify-content-center mx-3">
          {part === "partC" && (
            <>
              <Box class="my-3">
                <h6>
                  <u>
                    <b>Record Data:</b>
                  </u>
                </h6>
              </Box>

              {PartCKeysToCapture.map((key, index) => (
                <h6 key={index}>
                  <b>{key}</b>: {data[key]}
                </h6>
              ))}
            </>
          )}

          {part === "partA" && (
            <>
              {PartAKeysToCapture.map((key, index) => (
                <h6>
                  <b>{key}</b> : {data[key]}
                  {/* <h3>{key}</h3>
                <h3>{index}</h3> */}
                </h6>
              ))}
            </>
          )}
        </Box>
        <Box style={{width:"fit-content"}}>
          <img
            src={`https://docs.exampaper.vidh.ai/${data?.s3_path}`}
            width="90%"
            height="auto"
          />
        </Box>
      </Box>
    </>
  );
};

export default StatsCard;