import Link from "next/link";
import { getUser } from "~/server/auth";

export default async function Home() {
	const user = await getUser();

	return (
		<main className="flex min-h-screen flex-col items-center justify-center bg-[#070707]">
			<div className="container flex flex-col items-center justify-center gap-8 px-4 py-12">
				<h1 className="text-4xl tracking-tight text-white sm:text-5xl">
					<span className="text-[#999999]">&gt;</span> imemio
				</h1>
				<p className="text-[#666666]">memory management system</p>
				<Link
					className="flex max-w-xs flex-col gap-2 border border-[#2a2a2a] bg-[#0f0f0f] p-4 transition hover:border-[#666666]"
					href="/dashboard"
				>
					<h3 className="text-lg text-white">dashboard</h3>
					<div className="text-sm text-[#999999]">
						View and manage your memories. Create new memories and organise your
						thoughts.
					</div>
				</Link>
				<div className="flex flex-col items-center gap-3">
					<p className="text-center text-[#666666]">
						{user && <span>logged in as {user.email}</span>}
					</p>
					<Link
						className="border border-[#2a2a2a] bg-[#0f0f0f] px-6 py-2 text-white transition hover:border-[#666666]"
						href={user ? "/api/auth/signout" : "/auth/sign-in"}
					>
						{user ? "sign out" : "sign in"}
					</Link>
				</div>
			</div>
		</main>
	);
}