<template>
	<div v-if="allTags.length > 0" class="flex flex-col gap-3">
		<h2 class="text-lg m-0">Tags</h2>
		<div class="flex flex-wrap gap-1">
			<TagItem
				v-for="tag in allTags"
				:key="tag"
				:action="props.project.actualProjectType ? () => handleClickTag(tag) : undefined"
			>
				<FormattedTag :tag="tag" />
			</TagItem>
		</div>
	</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'

import FormattedTag from '../base/FormattedTag.vue'
import TagItem from '../base/TagItem.vue'

const router = useRouter()

const handleClickTag = (tag: string) => {
	if (!props.project.actualProjectType) return

	const projectType =
		props.project.actualProjectType === 'minecraft_java_server'
			? 'server'
			: props.project.actualProjectType

	const params = projectType === 'server' ? `sc=${tag}` : `f=categories:${tag}`

	router.push(`/discover/${projectType}?${params}`)
}

const props = defineProps<{
	project: {
		categories: string[]
		additional_categories: string[]
		actualProjectType?: string
	}
}>()

const allTags = computed(() => [
	...props.project.categories,
	...props.project.additional_categories,
])
</script>
