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 { Separator } from "@/components/ui/separator";
14import { Github, Mail, Chrome, Eye, EyeOff, Lock, User } from "lucide-react";
15import { useState } from "react";
16
17export function LoginBlock2() {
18  const [showPassword, setShowPassword] = useState(false);
19
20  return (
21    <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-background dark:to-muted/20 p-4">
22      <Card className="w-full max-w-md border-2 shadow-2xl bg-white/95 dark:bg-card/95 backdrop-blur-sm">
23        <CardHeader className="space-y-4 text-center">
24          <div className="mx-auto w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
25            <User className="h-10 w-10 text-white" />
26          </div>
27          <div className="space-y-2">
28            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
29              Welcome
30            </CardTitle>
31            <CardDescription className="text-muted-foreground">
32              Choose your preferred sign-in method
33            </CardDescription>
34          </div>
35        </CardHeader>
36
37        <CardContent className="space-y-6">
38          {/* Social Login Buttons */}
39          <div className="space-y-3">
40            <Button
41              variant="outline"
42              className="w-full gap-3 h-12 border-2 hover:border-blue-300"
43            >
44              <Chrome className="h-5 w-5 text-blue-500" />
45              Continue with Google
46            </Button>
47            <Button
48              variant="outline"
49              className="w-full gap-3 h-12 border-2 hover:border-gray-400"
50            >
51              <Github className="h-5 w-5" />
52              Continue with GitHub
53            </Button>
54          </div>
55
56          <div className="relative">
57            <div className="absolute inset-0 flex items-center">
58              <Separator className="w-full" />
59            </div>
60            <div className="relative flex justify-center text-xs uppercase">
61              <span className="bg-background px-2 text-muted-foreground">
62                Or continue with email
63              </span>
64            </div>
65          </div>
66
67          {/* Email/Password Form */}
68          <form className="space-y-4">
69            <div className="space-y-2">
70              <Label htmlFor="email">Email</Label>
71              <div className="relative">
72                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
73                <Input
74                  id="email"
75                  type="email"
76                  placeholder="name@example.com"
77                  className="pl-10 h-12"
78                />
79              </div>
80            </div>
81
82            <div className="space-y-2">
83              <Label htmlFor="password">Password</Label>
84              <div className="relative">
85                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
86                <Input
87                  id="password"
88                  type={showPassword ? "text" : "password"}
89                  placeholder="Enter your password"
90                  className="pl-10 pr-10 h-12"
91                />
92                <Button
93                  type="button"
94                  variant="ghost"
95                  size="icon"
96                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
97                  onClick={() => setShowPassword(!showPassword)}
98                >
99                  {showPassword ? (
100                    <EyeOff className="h-4 w-4 text-muted-foreground" />
101                  ) : (
102                    <Eye className="h-4 w-4 text-muted-foreground" />
103                  )}
104                </Button>
105              </div>
106            </div>
107
108            <Button
109              type="submit"
110              className="w-full h-12 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
111            >
112              Sign In
113            </Button>
114          </form>
115
116          <div className="text-center space-y-2">
117            <Button variant="link" className="text-sm text-muted-foreground">
118              Forgot your password?
119            </Button>
120            <div className="text-sm text-muted-foreground">
121              New to our platform?{" "}
122              <Button variant="link" className="px-0 font-medium text-blue-600">
123                Create an account
124              </Button>
125            </div>
126          </div>
127        </CardContent>
128      </Card>
129    </section>
130  );
131}