<script setup lang="ts">
const emit = defineEmits(['button-pressed'])
const props = defineProps<{
    icon: string,
    title: string,
    description: string,
    id: string
    isPressed: boolean | undefined
}>()
const icon = computed(() => `/img/icons/${props.icon}`)

function onButtonPress(id: string) {
    emit('button-pressed', id)
}
</script>

<template>
    <div class="playfield-button-container">
        <div>
            <div @click="onButtonPress(props.id)" class="playfield-button " :class="{ 'pressed': isPressed }">
                <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;
    }

    &.pressed {
        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%);
        border: 9px solid hsl(0 74% 10% / 50%);

    }

    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>
