<script lang="ts">
	import { Avatar, Button, DropdownMenu, Separator } from 'bits-ui';
	import { authClient } from './auth-client';
	import Image from './Image.svelte';
	import { CircleUser, FolderGit2, Loader2, User } from '@lucide/svelte';
	import { goto } from '$app/navigation';
	type MockUser = {
		image: string;
	};

	const session = authClient.useSession();
	const user = $derived($session.data?.user);
	let loading = $state(false);

	const signIn = async () => {
		loading = true;
		await authClient.signIn.social({
			provider: 'github'
		});
	};
</script>

<div class="h-14 w-full bg-[#292e42] sm:p-2">
	<div class="mx-auto flex h-full max-w-312 items-center justify-between">
		<Button.Root onclick={() => goto('/')}>
			<h1 class="header-title font-light">Project Host</h1>
		</Button.Root>
		{#if !user && !$session.isPending}
			<Button.Root class="rounded-md p-2 transition-colors hover:bg-gray-800" onclick={signIn}>
				{#if loading}
					<Loader2 class="animate-spin" />
				{:else}
					Sign In
				{/if}
			</Button.Root>
		{:else if user}
			<DropdownMenu.Root>
				<DropdownMenu.Trigger>
					<Image class="shadow-4xl h-10 w-10 rounded-full" src={user.image} />
				</DropdownMenu.Trigger>
				<DropdownMenu.Portal>
					<DropdownMenu.Content
						class="w-42 rounded-xl bg-black px-1 py-1.5 shadow-xl shadow-gray-800/5"
					>
						<DropdownMenu.Item class="dropdown-item cursor-pointer" onclick={() => goto('/add')}>
							<FolderGit2 class="mr-2" />
							<span>Add Project</span>
						</DropdownMenu.Item>
						<DropdownMenu.Item
							class="dropdown-item cursor-pointer"
							onclick={() => authClient.signOut()}
						>
							<User class="mr-2" />
							<span>Sign Out</span>
						</DropdownMenu.Item>
					</DropdownMenu.Content>
				</DropdownMenu.Portal>
			</DropdownMenu.Root>
		{:else}
			<div class="h-10 w-10 animate-pulse rounded-full bg-gray-700"></div>
		{/if}
	</div>
</div>
