<template>
    <div class="hookah-table">
        <div class="hookah-table__container">
            <div
                class="hookah-table__item"
                :class="{ 'hookah-table__item--active': hookahStore.selectedTableNumber === num }"
                v-for="num in 15"
                :key="num"
                @click="setTable(num)"
            >
                {{ num }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useHookahStore } from "@/store";

const hookahStore = useHookahStore();

function setTable(num: number) {
    hookahStore.selectedTableNumber = num;
}
</script>

<style lang="scss">
.hookah-table {
    display: flex;
    justify-content: center;
    align-items: center;

    &__container {
        display: flex;
        justify-content: center;

        flex-wrap: wrap;
        gap: r(10);
        width: 80%;
    }

    &__item {
        @include main-container;

        display: flex;
        justify-content: center;
        align-items: center;
        width: r(45);
        height: r(45);
        cursor: pointer;
        transition: 0.18s ease;
        transition-property: background-color, color, box-shadow;

        &--active {
            background: color("theme-color");
            color: color("ui-color-on-background");
            box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
                0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
        }
    }
}
</style>
