"use client";
import { useSession } from "next-auth/react";
import toast from "react-hot-toast";
import { sendVerificationLink } from "(app)/admin/user/action";
import { TriangleAlert } from "lucide-react";
import { useState } from "react";
import { Button } from "_components/ui/Button";

export const EmailVerification = () => {
	const session = useSession();
	const [loading, setLoading] = useState(false);
	return (
		<div role="alert" className="alert alert-warning">
			<TriangleAlert />
			<div>
				<h3 className="font-bold">E-Mail Adresse nicht bestätigt!</h3>
				<div className="text-xs">
					Wir haben dir bereits eine E-Mail gesendet. Wenn deine E-Mail Adresse nicht bestätigt ist,
					kannst du dich nicht mit der Leitstelle verbinden!
				</div>
			</div>
			<Button
				isLoading={loading}
				className="btn btn-sm"
				onClick={async () => {
					setLoading(true);
					if (!session.data?.user?.id) return;
					await sendVerificationLink(session.data.user.id); // Replace "userId" with the actual user ID
					toast.success("Verifizierungslink gesendet! Bitte prüfe deine E-Mails.");
					setLoading(false);
				}}
			>
				Link erneut senden
			</Button>
		</div>
	);
};