import UserIcon from "@heroicons/react/24/outline/UserIcon";
import { getBaseUrl } from "@/lib/base-url";
import { auth, signIn, signOut } from "@/server/auth";

// TODO
export default async function LogIn(): Promise<React.JSX.Element | undefined> {
	const session = await auth();

	return (
		<form
			action={async () => {
				"use server";
				if (session?.user) {
					await signOut({
						redirectTo: `${getBaseUrl()}/`,
					});
				} else {
					await signIn("authelia");
				}
			}}
		>
			<button
				type="submit"
				className="btn btn-outline btn-circle hover:bg-primary/25 group border-2 border-primary/75 p-1 transition-colors duration-100"
			>
				<UserIcon
					className={`h-8 w-auto transition-colors ${
						session?.user ? "stroke-warning" : ""
					}`}
				/>
				<span className="sr-only">{session?.user ? "Log out" : "Log in"}</span>
			</button>
		</form>
	);
}