<script>
import { RouterLink } from 'vue-router';
import { Icon } from '@iconify/vue'
export default {
    props: {
        title: String,
        description: String,
        icon: String,
        link: String,
    },
    components: {
        Icon,
    }
}

</script>


<template>
    <div class="flex flex-col flex-nowrap justify-end bg-gray-dark w-64 h-64 
    rounded-2xl hover:ring-2 ring-blue p-6 cursor-pointer" v-on:click="$router.push(link)">
        <div class="flex flex-row justify-center items-center h-full">
            <icon :icon="icon" class="h-20 w-20 text-white" />
        </div>
        <div>
            <h1 class="text-4xl m-0">{{ title }}</h1>
            <p class="text-white h-12">{{ description }}</p>
        </div>
    </div>
</template>


<style>
/* .card {
    color: var(--white);
    padding: 0 10px;
    margin: 10px;
    border-radius: 10px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    height: fit-content;
} */
</style>