<script setup lang="ts">
    const props = defineProps<{
        icon: string,
        title: string,
        description: string
    }>()
    const icon = computed(() => `/img/icons/${props.icon}`)
</script>

<template>
    <div class="playfield-button-container">
        <div>
            <div class="playfield-button">
                <NuxtImg :src="icon" alt="" format="webp" quality="80" />
                <!-- <p>{{ description }}</p> -->
            </div>
            <h3>{{ title }}</h3>
        </div>
    </div>
</template>

<style scoped lang="scss">

$button-size: 80px;

.playfield-button-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.4rem;
    justify-content: center;
    align-items: start;
    align-content: start;
    align-self: start;
    justify-items: center;
}
.playfield-button {
    height: $button-size;
    width: $button-size;
    padding: 0.4rem;
    justify-content: center;
    align-items: center;
    border: 1px solid hsl(0 74% 10% / 50%);
    border-bottom-color: hsl(0 74% 80% / 10%);
    border-radius: 0.5rem;
    background-image: linear-gradient(to bottom, hsl(0 74% 80%), hsl(0 74% 70%));
    box-shadow: inset 3px 3px 0.5rem hsl(0 74% 20%);
    font-size: 0.2rem;
    overflow: hidden;
    
    
    img {
        grid-area: image;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        aspect-ratio: 1 / 1;
        min-width: 0;
        min-height: 0;
        max-width: 80%;
        max-height: 100%;
        margin: auto;
    }


    p {
        grid-area: description;
        font-size: 0.2rem;
        text-align: center;
        overflow: hidden;
        
    }
}
h3 {
        font-weight: bold;
        margin-top: 0.2rem;
        font-size: 0.6rem;
        text-align: center;
        overflow: hidden;
}
</style>
