<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">
        <h3>{{ title }}</h3>
        <NuxtImg :src="icon" alt="" format="webp" quality="80" />
        <p>{{ description }}</p>
    </div>
</template>

<style scoped lang="scss">

$button-size: 80px;

    .playfield-button {
        height: $button-size;
        width: $button-size;
        padding: 0.4rem;
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 0.4rem;
        grid-template-areas: 
            "title"
            "image"
            "description";
        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;
        }

        h3 {
            grid-area: title;
            font-weight: bold;
            margin: 0;
            font-size: 0.3rem;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        p {
            grid-area: description;
            font-size: 0.2rem;
            text-align: center;
            overflow: hidden;
            
        }
    }
</style>
