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 { Checkbox } from "@/components/ui/checkbox";
15import { Eye, EyeOff, Mail, Lock, ArrowRight } from "lucide-react";
16import { useState } from "react";
17
18export function LoginBlock1() {
19  const [showPassword, setShowPassword] = useState(false);
20  const [rememberMe] = useState(false);
21
22  return (
23    <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4">
24      <Card className="w-full max-w-md border-2 shadow-xl">
25        <CardHeader className="space-y-4 text-center">
26          <div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
27            <Lock className="h-8 w-8 text-primary" />
28          </div>
29          <div className="space-y-2">
30            <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
31            <CardDescription className="text-muted-foreground">
32              Sign in to your account to continue
33            </CardDescription>
34          </div>
35        </CardHeader>
36
37        <CardContent className="space-y-6">
38          <form className="space-y-4">
39            <div className="space-y-2">
40              <Label htmlFor="email">Email Address</Label>
41              <div className="relative">
42                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
43                <Input
44                  id="email"
45                  type="email"
46                  placeholder="Enter your email"
47                  className="pl-10"
48                />
49              </div>
50            </div>
51
52            <div className="space-y-2">
53              <Label htmlFor="password">Password</Label>
54              <div className="relative">
55                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
56                <Input
57                  id="password"
58                  type={showPassword ? "text" : "password"}
59                  placeholder="Enter your password"
60                  className="pl-10 pr-10"
61                />
62                <Button
63                  type="button"
64                  variant="ghost"
65                  size="icon"
66                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
67                  onClick={() => setShowPassword(!showPassword)}
68                >
69                  {showPassword ? (
70                    <EyeOff className="h-4 w-4 text-muted-foreground" />
71                  ) : (
72                    <Eye className="h-4 w-4 text-muted-foreground" />
73                  )}
74                </Button>
75              </div>
76            </div>
77
78            <div className="flex items-center justify-between">
79              <div className="flex items-center space-x-2">
80                <Checkbox id="remember" checked={rememberMe} />
81                <Label htmlFor="remember" className="text-sm">
82                  Remember me
83                </Label>
84              </div>
85              <Button variant="link" className="px-0 text-sm">
86                Forgot password?
87              </Button>
88            </div>
89
90            <Button type="submit" className="w-full gap-2">
91              Sign In
92              <ArrowRight className="h-4 w-4" />
93            </Button>
94          </form>
95
96          <div className="text-center text-sm text-muted-foreground">
97            Don't have an account?{" "}
98            <Button variant="link" className="px-0 font-medium">
99              Sign up
100            </Button>
101          </div>
102        </CardContent>
103      </Card>
104    </section>
105  );
106}