"use client";
import { CheckEmailCode } from "(app)/admin/user/action";
import { Check } from "lucide-react";
import { useSession } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";

export default function Page() {
	const session = useSession();
	const router = useRouter();
	const searchParams = useSearchParams();
	const paramsCode = searchParams.get("code");
	const [code, setCode] = useState(paramsCode || "");
	return (
		<div className="card bg-base-200 shadow-xl mb-4 ">
			<div className="card-body">
				<p className="text-2xl font-semibold text-left flex items-center gap-2">
					<Check className="w-5 h-5" /> Email Bestätigung
				</p>
				<div className="flex justify-center gap-3 w-full">
					<input
						className="input flex-1"
						placeholder="code"
						value={code}
						onChange={(e) => setCode(e.target.value)}
					/>
					<button
						className="btn btn-primary"
						onClick={async () => {
							const res = await CheckEmailCode(session.data?.user.id || "", code);
							if (res.error) {
								toast.error(res.error);
							} else {
								toast.success(res.message || "Email erfolgreich bestätigt!");
								router.push("/");
							}
						}}
						disabled={!session.data?.user.email || !code}
					>
						Bestätigen
					</button>
				</div>
			</div>
		</div>
	);
}