import { Field, Input, Stack, Text } from "@chakra-ui/react";
import { Button } from "../components/ui/button";
import {
  DialogBody,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../components/ui/dialog";
function ForgetPassword() {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Text w={"100%"} textAlign={"end"} mt={2} cursor={"pointer"}>
          Forgot password?
        </Text>
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
        w={{ base: "90%", md: "400px" }}
        p={2}
        bgSize={"md"}
      >
        <DialogHeader bg="white" pt={3} pb={2}>
          <DialogTitle
            alignSelf="center"
            color="black"
            fontSize="18px"
            textAlign={"center"}
          >
            Forgot Password
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white" pt={5}>
          <Stack p={2}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                Please Enter Email Address
              </Field.Label>
              <Input
                color="black"
                p={2}
                fontSize="sm"
                type="text"
                border="1px solid grey"
                size={"sm"}
              />
            </Field.Root>
          </Stack>
        </DialogBody>
        <DialogFooter display="flex" justifyContent="center" mt={2} p={2}>
          <Button w="100%" bg="#02A0A0" color={"#fff"}>
            Reset Password
          </Button>
        </DialogFooter>
      </DialogContent>
    </DialogRoot>
  );
}

export default ForgetPassword;