import { Field, Input, Stack } from "@chakra-ui/react";
import {
  DialogActionTrigger,
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../components/ui/dialog";
import { Button } from "../../../components/ui/button";
import { IoMdAdd } from "react-icons/io";

function AddRegisterUsers() {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Button px={4} size={"xs"} bg={"#02A0A0"}>
          <IoMdAdd /> Add
        </Button>
      </DialogTrigger>

      <DialogContent
         bg={"#fff"}
         w={{ base: '90%', md: '400px' }}
         height={'80vh'}
         overflow={'scroll'}
         overflowX="hidden" 
         p={3} // Reduced padding
         bgSize={'md'}
      >
        <DialogHeader bg="white" >
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            Add User Accounts
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                First Name
              </Field.Label>
              <Input
               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Last Name
              </Field.Label>
              <Input
               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Gender
              </Field.Label>
              <Input
                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                DOB
              </Field.Label>
              <Input
               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                OTP Verified
              </Field.Label>
              <Input
               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Language
              </Field.Label>
              <Input
               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />
            </Field.Root>
          </Stack>
        </DialogBody>
        <DialogFooter mt={2}>
          <DialogActionTrigger asChild>
            <Button w="100%" bg="#02A0A0" color={"#fff"}>
              Save
            </Button>
          </DialogActionTrigger>
        </DialogFooter>
        <DialogCloseTrigger color="black" />
      </DialogContent>
    </DialogRoot>
  );
}

export default AddRegisterUsers;