import { Box, Button, Divider, FormLabel, Heading } from "@chakra-ui/react";
import React from "react";

const FormInputView = ({
  groupedFields,
  name,
  groupedFieldsTwo,
  errors,
  onSubmit,
  children,
}) => {
  console.log(groupedFields);

  return (
    <form>
      {Object?.entries(groupedFields, groupedFieldsTwo).map(
        ([section, fields], index) => (
          <Box key={section}>
            {console.log(fields)}
            <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
              {section}
            </Heading>
            <Box display={"flex"} gap={0}>
              <Box
                width={"100%"}
                p={5}
                display={"flex"}
                flexWrap={"wrap"}
                gap={4}
              >
                {fields.map(({ value, label, id, width, btn }, key) => (
                  <Box w={!width ? "49%" : width}>
                    <FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
                      {label}
                    </FormLabel>
                    <FormLabel fontSize={'sm'}>{value}</FormLabel>
                  </Box>
                ))}
              </Box>
            </Box>
            {index <
              Object.entries(groupedFields, groupedFieldsTwo).length - 1 && (
              <Divider />
            )}
          </Box>
        )
      )}
      {children}
    </form>
  );
};

export default FormInputView;