<script setup>
import ProductForm from "~/components/imports/ProductForm.vue";
import ProductVariantFormNew from "~/components/imports/ProductVariantFormNew.vue";

const menus = [
  {
    id: "product",
    name: "Tạo sản phẩm",
  },
  {
    id: "product-variant",
    name: "Thêm phiên bản",
  },
];
const activeMenu = ref(menus[0]);
</script>

<template>
  <div class="tabs">
    <ul>
      <li
        v-for="menu in menus"
        :key="menu.id"
        :class="[{ 'is-active': activeMenu.id === menu.id }]"
      >
        <a @click="activeMenu = menu">{{ menu.name }}</a>
      </li>
    </ul>
  </div>
  <ProductForm v-if="activeMenu.id === 'product'" />
  <ProductVariantFormNew v-if="activeMenu.id === 'product-variant'" />
</template>
