<template>
  <div class="container mx-auto px-4 py-16">
    <TemplatePageCategorySelection 
      v-if="!selectedCategory" 
      @category-selected="handleCategorySelect" 
    />

    <TemplatePageTemplateGrid 
      v-else 
      :category="selectedCategory" 
      @back="goBack" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

// State untuk menyimpan kategori yang sedang dipilih
const selectedCategory = ref(null);

// Fungsi ini akan menangkap event dari CategorySelection
const handleCategorySelect = (categoryName) => {
  selectedCategory.value = categoryName;
};

// Fungsi ini akan menangkap event 'back' dari TemplateGrid
const goBack = () => {
  selectedCategory.value = null;
};
</script>