<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="isUsable"
		:tags="ownerId === undefined ? [] : [{ label: `Owned by ${game.state.players.find(p => p.id === ownerId).name}`, icon: UserIcon }]"
		:disabled="!game.isYourTurn"
		@click="use()"
	>
		<div class="flex justify-center items-center text-5xl opacity-90 flex-grow relative top-1">
			<component :is="specialCardIcons[id]"/>
		</div>
		<div class="px-3 pb-2 text-sm flex items-end flex-grow">
			<div class="text-center">
				{{ 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 { specialCardIcons } from "../icons"
	import { specialCardsMeta } from "../../shared/game/cards"
	import { computed } from "vue"
	import { useGame } from "../clientGame"
	import { useThrottleFn } from "@vueuse/core"
	import UserIcon from "virtual:icons/ph/user-bold"

	const props = defineProps<{
		id: SpecialCardId
		isUsable?: boolean
		ownerId?: string
	}>()

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

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