<template>
	<Card
		class="w-35 h-45"
		:class="isUnknown ? 'bg-gradient-to-br from-gray-700 to-gray-800' : 'bg-gradient-to-br from-yellow-600 to-yellow-900'"
		:tags="tags"
	>
		<div class="font-fat text-white relative bottom-1 text-shadow-xl" :class="[isUnknown ? 'text-8xl' : 'text-7xl']">
			{{ isUnknown ? "?" : number }}
		</div>
	</Card>
</template>

<style module lang="scss">

</style>

<script setup lang="ts">
	import Card from "./Card.vue"
	import { computed, FunctionalComponent } from "vue"
	import EyeSlashIcon from "virtual:icons/ph/eye-slash"
	import { useGame } from "../clientGame"

	const props = defineProps<{
		number: number
		isCovert: boolean
		isOwn: boolean
	}>()

	const game = useGame()

	const isUnknown = computed(() => props.number === 0)
	const tags = computed(() => {
		const tags: Array<{ icon: FunctionalComponent; label: string }> = []

		if (props.isCovert && !isUnknown.value) {
			tags.push({
				icon: EyeSlashIcon,
				label: game.state.phase === 'end' && !props.isOwn
					? "You couldn’t see the number on this card during the game"
					: "The other players can’t see the number on this card"
			})
		}

		return tags
	})
</script>