import { ProcessingImages } from "@components/notifications/ProcessingImage";
import { useLocation, useNavigate } from "@solidjs/router";
import { IconArrowLeft } 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">
				<ProcessingImages />
			</div>
		</div>
	);
};
