<template>
  <div>
    <div class="flex items-center mb-8">
      <button @click="$emit('back')" class="text-blue-600 hover:text-blue-800 font-semibold mr-4">
        &larr; Kembali ke Kategori
      </button>
      <h1 class="text-3xl md:text-4xl font-bold text-gray-800">
        Pilih Template {{ category }} Favoritmu
      </h1>
    </div>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <div v-for="tpl in templates" :key="tpl.id" class="border rounded-lg p-4 text-center">
        <img :src="tpl.foto" :alt="tpl.nama" class="bg-gray-200 h-40 mb-4 rounded-md object-cover w-full" />
        <h4 class="font-semibold">{{ tpl.nama }}</h4>
        <p class="text-gray-500">Rp {{ tpl.harga }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  category: {
    type: String,
    required: true,
  },
  id_category: {
    type: Number,
    required: true
  }
})

const templates = ref([])

const fetchTemplates = async () => {
  try {
    templates.value = await $fetch(`http://localhost:8000/api/templates/category/${props.id_category}`)
  } catch (error) {
    console.error('Gagal ambil template:', error)
  }
}

onMounted(() => {
  fetchTemplates()
})

defineEmits(['back']);
</script>
