<template>
	<Card
		class="bg-gradient-to-br w-50 h-32"
		:class="meta_.type === 'permanent' ? 'from-green-800 to-green-900' : 'from-blue-700 to-blue-800'"
		as-button
		:tags="[{ label: `${count}x`, icon: numberCircleIcons[count] }]"
		:disabled="!game.isYourTurn"
		@click="use()"
	>
		<div class="flex justify-center items-center text-5xl opacity-90 flex-grow">
			<component :is="specialCardIcons[id]"/>
		</div>
		<div class="px-3 pb-2 text-sm flex items-end flex-grow">
			<div>
				{{ meta_.description }}
			</div>
		</div>
	</Card>
</template>

<style module lang="scss">

</style>

<script setup lang="ts">
	import Card from "./Card.vue"
	import type { SpecialCardId } from "../shared/game/cards"
	import { numberCircleIcons, specialCardIcons } from "../icons"
	import { specialCardsMeta } from "../shared/game/cards"
	import { computed } from "vue"
	import { useGame } from "../clientGame"
	import { useThrottleFn } from "@vueuse/core"

	const props = defineProps<{
		id: SpecialCardId
		count: number
	}>()

	const game = useGame()

	const meta_ = computed(() => specialCardsMeta[props.id])

	const use = useThrottleFn(() => {
		game.useSpecialCard(props.id)
	}, 1000)
</script>