sarlink-portal/components/auth/login-form.tsx

"use client";

import { Button } from "@/components/ui/button";

import { signin } from "@/actions/auth-actions";
import { Loader } from "lucide-react";
import { useActionState } from "react";
import { PhoneInput } from "../ui/phone-input";

export default function LoginForm() {
	const [state, formAction, isPending] = useActionState(signin, {
		message: "",
		status: "",
	});

	return (
		<form
			className="bg-white overflow-clip dark:bg-transparent dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow mt-4"
			action={formAction}
		>
			<div className="py-4 px-4">
				<div className="grid gap-4">
					<PhoneInput
						id="phone-number"
						name="phoneNumber"
						maxLength={8}
						disabled={isPending}
						placeholder="Enter phone number"
						defaultCountry="MV"
					/>

					{state.status === "error" && (
						<p className="text-red-500 text-sm">{state.message}</p>
					)}
					<Button
						className=""
						disabled={isPending}
						type="submit"
					>
						{isPending ? <Loader className="animate-spin" /> : "Request OTP"}
					</Button>
				</div>
				{/* <div className="mt-2 text-center text-sm">
					Don&apos;t have an account?{" "}
					<Link href="signup" className="underline">
						Sign up
					</Link>
				</div> */}
			</div>
		</form>
	);
}