<script lang="ts">
	import { goto } from "$app/navigation";

	interface Props {
		departmentId: string;
		orgSlug: string;
		fullscreen?: boolean;
	}

	let { departmentId, orgSlug, fullscreen = false }: Props = $props();

	// Files module links to the org documents page
	// In the future, this could be scoped to a department subfolder
	const filesPath = $derived(`/${orgSlug}/documents`);
</script>

<div
	class="flex flex-col items-center justify-center h-full gap-3 {fullscreen ? 'py-12' : 'py-6'}"
>
	<span
		class="material-symbols-rounded text-light/20"
		style="font-size: 36px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 36;"
		>folder</span
	>
	<p class="text-body-sm text-light/40">Department files and documents</p>
	<button
		class="px-4 py-2 rounded-xl bg-primary/10 text-primary text-body-sm font-heading hover:bg-primary/20 transition-colors"
		onclick={() => goto(filesPath)}
	>
		Open Files
	</button>
</div>
