<script lang="ts">
	import "carbon-components-svelte/css/all.css";
	import {
		Content,
		Header,
		HeaderGlobalAction,
		HeaderNav,
		HeaderNavItem,
		HeaderUtilities,
		SkipToContent,
		Theme
	} from "carbon-components-svelte";
	import Moon from "carbon-icons-svelte/lib/Moon.svelte";
	import Sun from "carbon-icons-svelte/lib/Sun.svelte";

	let dark = true;
</script>

<Theme
	theme={dark ? "g100" : "white"}
	on:update={update => dark = update.detail.theme === "g100"}
	persist persistKey="__carbon-theme"
/>

<Header company="Cyclane" platformName="Game Algorithms">
	<svelte:fragment slot="skip-to-content">
		<SkipToContent />
	</svelte:fragment>
	<HeaderNav>
		<HeaderNavItem href="/" text="About"/>
		<HeaderNavItem href="/o-x" text="Noughts & Crosses"/>
		<HeaderNavItem href="/connect-four" text="Connect Four"/>
	</HeaderNav>
	<HeaderUtilities>
		<HeaderGlobalAction icon={dark ? Moon : Sun} on:click={() => dark = !dark}/>
	</HeaderUtilities>
</Header>

<Content><slot/></Content>
