<template>
    <div class="hookah-heaviness">
        <div class="hookah-heaviness__container">
            <div
                class="hookah-heaviness__item"
                v-for="item in hookahStore.heavinessList"
                :key="item.title"
                :class="{ 'hookah-heaviness__item--active': hookahStore.selectedHeaviness === item }"
                @click="changeHeaviness(item)"
            >
                {{ item.title }}
            </div>
        </div>
    </div>
</template>

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

const hookahStore = useHookahStore();

function changeHeaviness(heaviness: heaviness) {
    hookahStore.selectedHeaviness = heaviness;
}
</script>

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

    &__container {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: r(10);
        width: 80%;
        z-index: 10;
    }

    &__item {
        @include main-container;

        display: flex;
        justify-content: center;
        align-items: center;
        padding: r(10) r(10);
        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>
