<script lang="ts">
	import type { Snippet } from "svelte";
	import { navigating } from "$app/stores";
	import { PageHeader, ContentSkeleton } from "$lib/components/ui";
	import * as m from "$lib/paraglide/messages";

	interface Props {
		data: {
			org: { id: string; name: string; slug: string };
		};
		children: Snippet;
	}

	let { data, children }: Props = $props();

	const isNavigatingHere = $derived(
		$navigating?.to?.url.pathname.includes("/calendar") ?? false,
	);
</script>

<div class="flex flex-col h-full overflow-hidden">
	<PageHeader title={m.nav_calendar()} icon="calendar_today" iconColor="text-blue-400" />

	{#if isNavigatingHere}
		<ContentSkeleton variant="calendar" />
	{:else}
		<div class="flex-1 overflow-auto">
			{@render children()}
		</div>
	{/if}
</div>
