import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { Label } from "@/components/ui/label";

export default function ForgotPasswordModal() {
  return (
    <div className="mt-5">
      <Dialog>
        <DialogTrigger asChild>
          <Button className=" whitespace-nowrap flex items-start ml-24 bg-transparent border-none hover:bg-transparent shadow-none">
            <h1 className="text-green-600">Forgot password?</h1>
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>What&apos;s your email?</DialogTitle>
            <DialogDescription>
              Please verify your email for us. Once you do, we&apos;ll send
              instructions to reset your password
            </DialogDescription>
          </DialogHeader>
          <div className="flex items-center space-x-2">
            <div className="grid flex-1 gap-2">
              <Label htmlFor="link" className="sr-only">
                Link
              </Label>
              <Input
                id="email"
                type="email"
                placeholder="your.email@gmail.com"
              />
            </div>
          </div>
          <DialogFooter className="sm:justify-start">
            <DialogClose asChild>
              <Button type="button">RESET MY PASSWORD</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}