"use client";

import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import { ScanFaceIcon } from "lucide-react";
import Link from "next/link";
import { useState } from "react";

export function LoginButton() {
	const { toast } = useToast();
	const [isLocked, setLocked] = useState(false);
	function onClick() {
		if (!isLocked) {
			toast({
				description: "Du wirst angemeldet...",
			});

			// Prevent multiple clicks because of login delay...
			setLocked(true);
			setTimeout(() => {
				setLocked(false);
			}, 1000 * 5);
		}
		toast({
			description: "Bitte warte einen Moment...",
		});
	}

	return (
		<Button onClick={onClick} variant={"ghost"} className="gap-2 flex items-center" asChild disabled={isLocked}>
			<Link href="/auth/login">
				<ScanFaceIcon className="w-4 h-4" />
				<span>Anmelden</span>
			</Link>
		</Button>
	);
}