<script lang="ts">
	import type { PageData } from './$types';
	import { env } from '$env/dynamic/public';
	import { IconOutline } from 'svelte-heros-v2';

	export let data: PageData;

	let tabs = [
		{
			path: `${env.PUBLIC_BASE_PATH}/admin/users`,
			icon: 'user-group-outline',
			name: 'Registrierte Nutzer',
			enabled: data.userCount != null
		},
		{
			path: `${env.PUBLIC_BASE_PATH}/admin/reports`,
			icon: 'flag-outline',
			name: 'Reports',
			enabled: data.reportCount != null
		},
		{
			path: `${env.PUBLIC_BASE_PATH}/admin/admin`,
			icon: 'users-outline',
			name: 'Website Admins',
			enabled: data.adminCount != null
		}
	];
</script>

<div class="flex justify-around items-center h-full">
	{#each tabs as tab}
		{#if tab.enabled}
			<div class="flex flex-col gap-4 justify-center items-center">
				<a
					class="h-64 w-64 border flex justify-center items-center rounded-xl duration-100 hover:bg-base-200"
					href={tab.path}
					title={tab.name}
				>
					<IconOutline width="5rem" height="5rem" name={tab.icon} />
				</a>
				<span>{tab.name}</span>
			</div>
		{/if}
	{/each}
</div>
