Auth — Login

"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";

export function AuthLoginBlock() {
  return (
    <section className="min-h-[600px] flex items-center justify-center p-6">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">Welcome back</CardTitle>
          <CardDescription>
            Enter your email below to sign in to your account.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-3">
            <Button variant="outline" className="h-10">
              <span className="text-base mr-1.5">🐙</span> GitHub
            </Button>
            <Button variant="outline" className="h-10">
              <span className="text-base mr-1.5">🇬</span> Google
            </Button>
          </div>

          <div className="relative">
            <Separator className="my-2" />
            <span className="absolute left-1/2 -translate-x-1/2 -top-2 bg-card px-2 text-xs text-muted-foreground">
              OR CONTINUE WITH
            </span>
          </div>

          <div className="space-y-3">
            <div className="space-y-1.5">
              <Label htmlFor="auth-email">Email</Label>
              <Input id="auth-email" type="email" placeholder="you@example.com" className="h-10" />
            </div>
            <div className="space-y-1.5">
              <div className="flex items-center justify-between">
                <Label htmlFor="auth-password">Password</Label>
                <a href="#" className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-4">
                  Forgot?
                </a>
              </div>
              <Input id="auth-password" type="password" className="h-10" />
            </div>
            <Button className="w-full h-10 text-base">Sign in</Button>
          </div>

          <p className="text-center text-sm text-muted-foreground">
            Don&apos;t have an account?{" "}
            <a href="#" className="text-foreground underline underline-offset-4 hover:no-underline">
              Sign up
            </a>
          </p>
        </CardContent>
      </Card>
    </section>
  );
}