<script lang="ts">
	import { resolve } from "$app/paths";
	import GalleryVertical from "$icon/gallery-vertical";
	import Button from "$lib/components/ui/Button.svelte";
	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
	import Timeline from "$lib/components/timeline/Timeline.svelte";
	import type { PageData } from "./$types";

	let { data }: { data: PageData } = $props();
</script>

<svelte:head>
	<title>Timeline &middot; Tangled</title>
</svelte:head>

<section class="mx-auto flex w-full max-w-screen-md flex-col gap-4 px-6 py-8">
	<div class="flex items-center justify-between">
		<h1 class="flex items-center gap-2 text-2xl font-semibold">
			<GalleryVertical class="size-5 text-foreground-subtle" aria-hidden="true" />
			Timeline
		</h1>
		{#if data.signedIn}
			<ButtonGroup>
				<Button
					href={resolve("/timeline" as "/")}
					variant={data.followingOnly ? "ghost" : "default"}>Global</Button
				>
				<Button
					href={resolve("/timeline?following=true" as "/")}
					variant={data.followingOnly ? "default" : "ghost"}>Following</Button
				>
			</ButtonGroup>
		{/if}
	</div>

	<Timeline
		feed={data.feed ?? []}
		emptyMessage={data.followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."}
	/>
</section>
