import Link from "next/link";
import { getServerSession } from "next-auth";
import { Icon } from "@iconify/react";

import SearchBar from "./search-bar";
import ProfileOverview from "./profile-overview";
import LogoutButton from "./logout-button";

export default async function Header() {
	const session = await getServerSession();

	return (
		<div className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-200 shadow-md max-lg:grid-cols-2 max-sm:grid-cols-1">
			<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400 max-sm:text-center">
				TomodachiShare
			</Link>

			<div className="flex justify-center max-lg:justify-end max-sm:col-span-3 max-sm:justify-center">
				<SearchBar />
			</div>

			<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-sm:justify-center">
				<li title="Random Mii">
					<Link href={"/random"} className="pill button !p-0 h-full aspect-square">
						<Icon icon="mdi:dice-3" fontSize={28} />
					</Link>
				</li>
				<li>
					<Link href={"/submit"} className="pill button h-full">
						Submit
					</Link>
				</li>
				{!session?.user ? (
					<li>
						<Link href={"/login"} className="pill button h-full">
							Login
						</Link>
					</li>
				) : (
					<>
						<ProfileOverview />
						<LogoutButton />
					</>
				)}
			</ul>
		</div>
	);
}