import { ProcessingImages } from "@components/notifications/ProcessingImage";
import { A, useLocation, useNavigate } from "@solidjs/router";
import { IconArrowLeft, IconSettings } from "@tabler/icons-solidjs";
import { Component, Show } from "solid-js";

export const Topbar: Component = () => {
	const nav = useNavigate();
	const location = useLocation();

	return (
		<div class="w-full flex items-center bg-white rounded-xl h-16 px-4 gap-4">
			<Show when={location.pathname !== "/"}>
				<div class="cursor-pointer" onClick={() => nav(-1)}>
					<IconArrowLeft />
				</div>
			</Show>
			<h1 class="font-bold text-2xl">Haystack</h1>
			<div class="ml-auto">
				<div class="flex items-center gap-2">
					<ProcessingImages />
					<A href="/settings" class="w-16 h-16 flex items-center">
						<IconSettings />
					</A>
				</div>
			</div>
		</div>
	);
};