1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card";
13import { ArrowLeft, Mail, CheckCircle } from "lucide-react";
14import { useState } from "react";
15
16export function LoginBlock5() {
17  const [emailSent, setEmailSent] = useState(false);
18  const [email, setEmail] = useState("");
19
20  const handleSubmit = (e: React.FormEvent) => {
21    e.preventDefault();
22    setEmailSent(true);
23  };
24
25  if (emailSent) {
26    return (
27      <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4">
28        <Card className="w-full max-w-md border-2 shadow-xl">
29          <CardHeader className="space-y-4 text-center">
30            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center">
31              <CheckCircle className="h-8 w-8 text-green-600 dark:text-green-400" />
32            </div>
33            <div className="space-y-2">
34              <CardTitle className="text-2xl font-bold">
35                Check Your Email
36              </CardTitle>
37              <CardDescription className="text-muted-foreground">
38                We've sent a password reset link to your email address
39              </CardDescription>
40            </div>
41          </CardHeader>
42
43          <CardContent className="space-y-6">
44            <div className="text-center space-y-4">
45              <div className="p-4 bg-muted/50 rounded-lg">
46                <p className="text-sm text-muted-foreground mb-2">
47                  We sent an email to:
48                </p>
49                <p className="font-medium">{email}</p>
50              </div>
51
52              <div className="text-sm text-muted-foreground space-y-2">
53                <p>Click the link in the email to reset your password.</p>
54                <p>If you don't see the email, check your spam folder.</p>
55              </div>
56            </div>
57
58            <div className="space-y-3">
59              <Button
60                variant="outline"
61                className="w-full"
62                onClick={() => setEmailSent(false)}
63              >
64                Try Different Email
65              </Button>
66
67              <Button variant="link" className="w-full">
68                Resend Email
69              </Button>
70            </div>
71
72            <div className="text-center">
73              <Button variant="ghost" className="gap-2">
74                <ArrowLeft className="h-4 w-4" />
75                Back to Sign In
76              </Button>
77            </div>
78          </CardContent>
79        </Card>
80      </section>
81    );
82  }
83
84  return (
85    <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4">
86      <Card className="w-full max-w-md border-2 shadow-xl">
87        <CardHeader className="space-y-4 text-center">
88          <div className="mx-auto w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center">
89            <Mail className="h-8 w-8 text-blue-600 dark:text-blue-400" />
90          </div>
91          <div className="space-y-2">
92            <CardTitle className="text-2xl font-bold">
93              Forgot Password?
94            </CardTitle>
95            <CardDescription className="text-muted-foreground">
96              No worries, we'll send you reset instructions
97            </CardDescription>
98          </div>
99        </CardHeader>
100
101        <CardContent className="space-y-6">
102          <form onSubmit={handleSubmit} className="space-y-4">
103            <div className="space-y-2">
104              <Label htmlFor="email">Email Address</Label>
105              <div className="relative">
106                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
107                <Input
108                  id="email"
109                  type="email"
110                  placeholder="Enter your email address"
111                  className="pl-10"
112                  value={email}
113                  onChange={(e) => setEmail(e.target.value)}
114                  required
115                />
116              </div>
117            </div>
118
119            <Button type="submit" className="w-full">
120              Send Reset Instructions
121            </Button>
122          </form>
123
124          <div className="text-center">
125            <Button variant="ghost" className="gap-2">
126              <ArrowLeft className="h-4 w-4" />
127              Back to Sign In
128            </Button>
129          </div>
130        </CardContent>
131      </Card>
132    </section>
133  );
134}