<script setup lang="ts">


import {Category} from "@/models/Category";
import {onMounted, ref} from "vue";
import {getCategories} from "@/services/categoryService";
import CategoryListItem from "@/components/settings/categories/CategoryListItem.vue";
import Button from "primevue/button";

const loading = ref(true);
const categories = ref<Category[]>([]);

const fetchCategories = async () => {
  loading.value = true;
  try {
    console.log('loaded')
    const result = await getCategories();
    categories.value = result.data;
  } catch (error) {
    console.error('Error fetching categories:', error);
  }
  loading.value = false
}
onMounted(async () => {
      await fetchCategories()
    }
)


</script>

<template>
  <div v-if="loading" class="flex flex-row ">
    Loading...
  </div>
  <div v-else class="">
    <div class="flex flex-col bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
      <div class="flex flex-row items-center min-w-fit  justify-between">
        <p class="text-2xl font-bold">Categories</p>
        <router-link to="/settings/categories">
          <Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
        </router-link>
      </div>
      <div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">
        <CategoryListItem v-for="category in categories" :category="category"/>
      </div>
    </div>
  </div>

</template>

<style scoped>
.overflow-x-auto {
  max-height: 60vh; /* Ограничение высоты для появления прокрутки */
}
</style>