<script lang="ts">
	import { link, location } from "svelte-spa-router";

	type Link = {
		label: string;
		href: string;
		base: string;
	};
	let sublinks: Link[] = [
		{
			label: "Daily",
			href: "/daily",
			base: "/daily",
		},
		{
			label: "Weekly",
			href: "/weekly",
			base: "/weekly",
		},
		{
			label: "Monthly",
			href: "/monthly",
			base: "/monthly",
		},
		{
			label: "Yearly",
			href: "/yearly",
			base: "/yearly",
		},
	];

	let selected = "Energy";
	$: {
		sublinks = sublinks.map((sublink: Link) => {
			return {
				...sublink,
				href: `/${selected}${sublink.base}`,
			};
		});
	}
</script>

<header
	class="flex h-22 items-center justify-center bg-base-100 shadow-lg sticky top-0 z-50 border-b
   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
>
	<div>
		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
			<a
				use:link
				class={"/" == $location
					? "transition-colors hover:text-foreground/80"
					: "transition-colors hover:text-foreground/80 text-foreground/60"}
				href="/"
				on:click={(e) => (selected = "Energy")}>Energy</a
			>
			<a
				use:link
				class={"/Weight" == $location
					? "transition-colors hover:text-foreground/80"
					: "transition-colors hover:text-foreground/80 text-foreground/60"}
				href="/Weight"
				on:click={(e) => (selected = "Weight")}>Weight</a
			>
		</nav>
		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
			{#each sublinks as { label, href }}
				<a
					use:link
					{href}
					class={href == $location
						? "transition-colors hover:text-foreground/80"
						: "transition-colors hover:text-foreground/80 text-foreground/60"}>{label}</a
				>
			{/each}
		</nav>
	</div>
</header>
