<template>
  <v-data-table
    :headers="headers"
    :items="filteredItems"
    :loading="loading"
    :items-per-page="itemsPerPage"
    :page="page"
    :server-items-length="totalItems"
    @update:page="$emit('update:page', $event)"
    @update:items-per-page="$emit('update:items-per-page', $event)"
  >
  <template v-slot:[`item.actions`]="{ item }">
        <div class="d-flex justify-end">
          <v-icon color="primary" @click="openEditPage(item)" class="ml-2">
            mdi-pencil
          </v-icon>
          <v-icon color="red" @click="deleteItem(item.id)" class="ml-2">mdi-delete</v-icon>
        </div>
      </template>
      <template v-slot:no-data>
        <p>{{ error || "Nenhum dado encontrado." }}</p>
      </template>
  </v-data-table>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    headers: {
      type: Array,
      required: true
    },
    loading: Boolean,
    page: Number,
    itemsPerPage: Number,
    totalItems: Number,
    searchQuery: String,
    filterField: {
      type: String,
      default: 'name'
    },
    openEditPage: Function,
    deleteItem: Function
  },
  computed: {
    filteredItems() {
      if (!this.searchQuery) return this.items;
      return this.items.filter(item => 
        item[this.filterField]?.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
}
</script>