import { Chat } from "@/components/interaction-panel/chat";
import { createFileRoute, Link } from "@tanstack/react-router";
import LogoWithText from "@/icons/logo-with-text.svg?react";
import { Button } from "@/components/ui/button";
import { useAccountStore } from "@/contexts/AccountContext";

export const Route = createFileRoute("/")({
	component: App,
});

function App() {
	const { userId } = useAccountStore();

	return (
		<div className="h-full  pt-5">
			{!userId && (
				<header className="px-10 h-[52px] flex items-center justify-between absolute w-full">
					<LogoWithText />
					<Link to="/auth/mail" viewTransition={{ types: ["warp"] }}>
						<Button className=" text-[18px] w-[106px] cursor-pointer">
							Sign in
						</Button>
					</Link>
				</header>
			)}
			<Chat />
		</div>
	);
}