import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Input, Stack } from "@chakra-ui/react"
import { Button } from "../../components/ui/button";
import EnterOTP from "./EnterOTP";
function EnterPassword() {
    return (

        <DialogRoot placement="center">
            <DialogTrigger asChild>
                <Button w="100%" bg="#02A0A0" color={"#fff"}>
                    Save
                </Button>

            </DialogTrigger>

            <DialogContent
                bg={"#fff"}
                // w={{ lg: "60%", md: "230px" }}
                w={{ base: '90%', md: '400px' }}

                // height={'80vh'}
                // overflow={'scroll'}
                p={2} // Reduced padding
                bgSize={'md'}
            >
                <DialogHeader bg="white" pt={3} pb={2} >
                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white" pt={5}>
                    <Stack p={2} >
                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>


                    </Stack>
                </DialogBody>
                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
                >
                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button> */}
                    <EnterOTP />
                </DialogFooter>

                {/* <DialogCloseTrigger color="black" /> */}
            </DialogContent>
        </DialogRoot >

    )
}

export default EnterPassword