<template>
    <div class="menu-item" @click="openModal()">
        <ImageComp class="menu-item__image" src="/media/images/tobaco1.webp" />
        <div class="menu-item__title">{{ item.title }}</div>
        <div class="menu-item__description">{{ item.description }}</div>
        <div class="menu-item__price">
            {{ item.price }}
            <FontAwesomeIcon class="menu-item__price-icon" icon="ruble-sign" />
        </div>
        <ModalComp ref="refModal">
            <div class="menu-item__modal">
                <ImageComp class="menu-item__image" src="/media/images/tobaco1.webp" />
                <div class="menu-item__title">{{ item.title }}</div>
                <div class="menu-item__description">{{ item.description }}</div>
                <div class="menu-item__price">
                    {{ item.price }}
                    <FontAwesomeIcon class="menu-item__price-icon" icon="ruble-sign" />
                </div>
            </div>
        </ModalComp>
    </div>
</template>

<script setup lang="ts">
import { menuItem } from "@/types";
import { onDeactivated, ref } from "vue";
import ModalComp from "@/components/UI/ModalComp.vue";

const refModal = ref<InstanceType<typeof ModalComp> | undefined>();
const props = defineProps<{ item: menuItem }>();

onDeactivated(() => {
    refModal.value?.close();
});

function openModal() {
    refModal.value?.open();
}
</script>

<style lang="scss">
.menu-item {
    display: flex;
    flex-direction: column;
    gap: r(10);
    width: 90%;
    margin: r(10) 0;
    padding: r(15);
    border-radius: r(6);
    background: color("main-background");
    box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);

    &__image {
        max-width: 100%;
    }

    &__title {
        font-size: r(23);
    }

    &__price {
        font-size: r(23);
    }

    &__price-icon {
        font-size: r(20);
    }

    &__modal {
        display: flex;
        flex-direction: column;
        gap: r(10);
    }
}
</style>
