<script lang="ts">
	import { navigationStore } from '../navigation';
	import AppIcon from './AppIcon.svelte';

	let { app, isUnique } = $props();

	function onclick(event: MouseEvent) {
		if (app.id === 'ZZ-store') return navigationStore.navigateTo('/store');
		if (app.id === 'ZZ-settings') return navigationStore.navigateTo('/settings');
		if (app.id === 'ZZ-invite') return navigationStore.navigateTo('/ccn-info');
		if (isUnique) return navigationStore.navigateTo('/app/' + app.id);
		console.log(app);
		return navigationStore.navigateTo('/app/' + app.id + ':' + app.author);
	}
</script>

<button
	class="group flex flex-col items-center gap-4 p-6 hover:scale-105 hover:-translate-y-2 transition-all duration-300 ease-out"
	{onclick}
>
	<AppIcon
		icon={app.icon}
		color={app.iconColor}
		foregroundColor={app.iconForegroundColor}
		strokeColor={app.iconStrokeColor}
		isHomeScreen
	/>

	<span
		class="text-base font-semibold text-base-content group-hover:text-primary transition-colors duration-300"
	>
		{app.name}
	</span>
</button>
