<script lang="ts">
	import { invalidateAll } from '$app/navigation';
	import Input from '$lib/components/ui/input/input.svelte';
	import { pb } from '$lib/db.svelte';
	import Button from './ui/button/button.svelte';
</script>

<a class="absolute top-[50%] left-4 translate-y-[-50%] text-5xl" href="/">Heddit</a>

<Input
	type="search"
	placeholder="Search on heddit..."
	class="absolute top-[50%] left-[50%] w-[40%] translate-[-50%]"
/>

<div class="absolute top-[50%] right-4 flex w-fit translate-y-[-50%] gap-4">
	{#if pb.authStore.record?.name}
		<Button
			class="cursor-pointer"
			onclick={async () => {
				pb.authStore.clear();
				window.location.reload();
			}}>Logout</Button
		>
	{:else}
		<Button variant="secondary" href="/auth/login">Login</Button>
		<Button href="/auth/register">Register</Button>
	{/if}
</div>
