<template>
  <v-data-table 
    :headers="headers" 
    :items="filteredUsers" 
    :loading="loading" 
    item-value="id" 
    items-per-page-text="Itens por página" 
    class="elevation-1" 
    :page.sync="page" 
    :items-per-page="itemsPerPage"
  >
    <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="deleteUser(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: {
    users: Array,
    loading: Boolean,
    error: String,
    searchQuery: String,
    headers: Array,
    page: Number,
    itemsPerPage: Number,
    openEditPage: Function,
    deleteUser: Function
  },
  computed: {
    filteredUsers() {
      if (!this.searchQuery) {
        return this.users;
      }
      return this.users.filter(user =>
        user.username.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>
