<template>
	<component :is="asButton ? 'button' : 'div'" class="block flex-shrink-0 rounded-lg shadow-xl bg-gradient-to-br border-none text-inherit" :class="$style.root">
		<div class="relative flex flex-col items-center justify-center h-full">
			<div class="absolute top-2 right-2 bg-dark-800 rounded-full flex gap-2 items-center px-2">
				<div v-for="tag in tags" :key="tag.label" :title="tag.label">
					<component :is="tag.icon" class="relative top-0.75"/>
				</div>
			</div>
			<slot/>
		</div>
	</component>
</template>

<style module lang="scss">
	.root {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url("../assets/noise.png") repeat;
			opacity: 10%;
		}

		button:disabled {
			cursor: not-allowed;
		}

    &:is(button) {
      cursor: pointer;
    }
	}
</style>

<script setup lang="ts">
	import type { FunctionalComponent, PropType } from "vue"

	const props = defineProps({
		tags: {
			type: Array as PropType<Array<{
				label: string
				icon: FunctionalComponent
			}>>,
			default: []
		},
		asButton: Boolean
	})
</script>