<template>
  <div>
    <MenuDesktop
      v-if="isDesktop"
      :categories="categories"
      :fallback-image="fallbackImage"
      @back="$emit('back')"
    />

    <MenuMobile
      v-else
      :categories="categories"
      :fallback-image="fallbackImage"
      @back="$emit('back')"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";

import MenuDesktop from "@/components/Menu/Desktop.vue";
import MenuMobile from "@/components/Menu/Mobile.vue";

type Image = {
  src?: string;
  alt?: string;
};

type MenuParent = {
  id: number;
  title: string;
  image?: Image;
};

type MenuItem = {
  title: string;
  description?: string;
  image?: Image;
  price?: string;
};

type MenuCategory = {
  parent?: MenuParent;
  title: string;
  description?: string;
  image?: Image;
  items?: MenuItem[];
};

defineProps<{
  categories: MenuCategory[];
  fallbackImage?: string;
}>();

defineEmits<{
  back: [];
}>();

const isDesktop = ref(false);

function handleResize() {
  isDesktop.value = window.innerWidth >= 1024;
}

onMounted(() => {
  handleResize();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
</script>