import { Box, FormControl, FormLabel, Input, Text } from "@chakra-ui/react";
import { Grid, GridItem } from "@chakra-ui/react";
import React from "react";

const formsInfos = [
  {
    label: "Address line 1",
  },
  {
    label: "Address line 2",
  },
  {
    label: "Pincode",
  },
  {
    label: "City",
  },
  {
    label: "Single Point Activation Number",
  },
];

const SingleAddress = () => {
  return (
    <Box p={4}>
      <Text color="#5E5E5E" fontWeight={600} fontSize="small" mb={4}>
        Fill address details
      </Text>

      <FormControl>
        <Grid templateColumns='repeat(2, 1fr)' gap={6}>
          {formsInfos.map((val) => (
            <GridItem
              key={val.label}
            >
              <FormLabel>{val.label}</FormLabel>
              <Input type="text" />
            </GridItem>
          ))}
        </Grid>
      </FormControl>
    </Box>
  );
};

export default SingleAddress;
