<script setup lang="ts">
import { Category } from "@/models/Category";
import { PropType } from "vue";
import Button from "primevue/button";

// Определение входных параметров (props)
const props = defineProps({
  category: { type: Object as PropType<Category>, required: true }
});

// Определение событий (emits)
const emit = defineEmits(["open-edit", "delete-category"]);

// Функция для открытия редактора категории
const openEdit = () => {
  emit("open-edit", props.category); // Использование события для открытия редактора
};

// Функция для удаления категории
const deleteCategory = () => {
  console.log('deleteCategory ' + props.category?.id);
  emit("delete-category", props.category.id); // Использование события для удаления категории
};

</script>

<template>
  <div class="flex rounded-xl border-2 bg-white shadow-xl min-w-fit  max-h-fit gap-5 flex-row items-center justify-between w-full p-2">
    <div class="flex flex-row  items-center p-x-4 gap-4">
      <p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
      <div class="flex flex-col items-start justify-items-start w-full">
        <p class="font-bold">{{ category.name }}</p>
        <p class="font-light line-clamp-1">{{ category.description }}</p>
      </div>
    </div>
    <div class="flex flex-row items-center p-x-4 gap-2  ">
      <Button icon="pi pi-pen-to-square" rounded @click="openEdit"/>
      <Button icon="pi pi-trash" severity="danger" rounded @click="deleteCategory"/>
    </div>
  </div>
</template>

<style scoped>
/* Внешний вид компонента */
</style>
