"use client";

import { TriangleAlertIcon } from "lucide-react";
import { type FC, useActionState } from "react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Field } from "@/components/ui/field";
import { AuthButton } from "../components/auth-button";
import { sendPasswordResetEmail } from "./actions";

export const Form: FC = () => {
	const [authError, action, isPending] = useActionState(
		sendPasswordResetEmail,
		null,
	);

	return (
		<form action={action}>
			<div className="grid gap-[16px]">
				{authError != null && (
					<Alert variant="destructive">
						<TriangleAlertIcon className="w-4 h-4" />
						<AlertTitle>Authentication Error</AlertTitle>
						<AlertDescription>
							{authError.message || "An error occurred. Please try again."}
						</AlertDescription>
					</Alert>
				)}
				<Field
					type="email"
					label="Email"
					name="email"
					ignore1password
					className="bg-inverse/10"
				/>
				<AuthButton type="submit" disabled={isPending}>
					Reset password
				</AuthButton>
			</div>
		</form>
	);
};
