<script lang="ts">
	import { env } from '$env/dynamic/public';
	import { BookOpen, Cog6Tooth, Flag, UserGroup, Users } from 'svelte-heros-v2';

	let { data } = $props();

	let tabs = [
		{
			path: `${env.PUBLIC_BASE_PATH}/admin/users`,
			icon: UserGroup,
			name: 'Registrierte Nutzer',
			enabled: data.userCount != null
		},
		{
			path: `${env.PUBLIC_BASE_PATH}/admin/reports`,
			icon: Flag,
			name: 'Reports',
			enabled: data.reportCount != null
		},
		{
			path: `${env.PUBLIC_BASE_PATH}/admin/feedback`,
			icon: BookOpen,
			name: 'Feedback',
			enabled: data.feedbackCount != null
		},
		{
			path: `${env.PUBLIC_BASE_PATH}/admin/admin`,
			icon: Users,
			name: 'Website Admins',
			enabled: data.adminCount != null
		},
		{
			path: `${env.PUBLIC_BASE_PATH}/admin/settings`,
			icon: Cog6Tooth,
			name: 'Website Einstellungen',
			enabled: data.settingsRead
		}
	];
</script>

<div class="flex justify-around items-center h-screen">
	{#each tabs as tab}
		{#if tab.enabled}
			{@const Icon = tab.icon}
			<div class="flex flex-col gap-4 justify-center items-center">
				<a
					class="h-48 w-48 border flex justify-center items-center rounded-xl duration-100 hover:bg-base-200"
					href={tab.path}
					title={tab.name}
				>
					<Icon />
				</a>
				<span>{tab.name}</span>
			</div>
		{/if}
	{/each}
</div>
