

<template>
    <NuxtLink :to="link">
        <div class="w-[300px] h-[216px] border border-black rounded-lg p-6 flex flex-col justify-between gap-4">
            <div class="flex justify-between">
                <div class="rounded-full w-[80px] h-[80px] bg-[#D9D9D9] flex justify-center items-center">
                    <Icon :name="iconName" style="color: black" size="44" />
                </div>
                <div>
                    <Icon name="mdi:plus" style="color: black" size="44"  />
                </div>
            </div>
            <div class="uppercase font-bold">
                <p class="text-3xl text-primary-500">
                    <slot name="label">{{ label }}</slot>
                </p>
            </div>
        </div>
        </NuxtLink>
</template>

<script setup lang="ts">
const props = defineProps<{
    link: string
    iconName: string
    label: string
}>()
</script>
