<script setup>
import { ref } from 'vue';
import DataTableToolbar from './DataTableToolbar.vue';

// Example: Using DataTableToolbar standalone
const search = ref('');
const pageSize = ref(10);
const selectedCount = ref(0);

const handleSearchChange = (value) => {
  search.value = value;
  console.log('Search changed:', value);
};

const handlePageSizeChange = (value) => {
  pageSize.value = value;
  console.log('Page size changed:', value);
};

const handleExport = (format) => {
  console.log('Export:', format);
};

const handleAdd = () => {
  console.log('Add button clicked');
};
</script>

<template>
  <div class="space-y-4">
    <!-- Standalone DataTableToolbar -->
    <DataTableToolbar
      :search="search"
      :show-search="true"
      :show-page-size="true"
      :page-size="pageSize"
      :selected-count="selectedCount"
      :show-selected-count="true"
      :show-export="true"
      :show-add="true"
      :show-filters="true"
      @update:search="handleSearchChange"
      @update:page-size="handlePageSizeChange"
      @export="handleExport"
    >
      <!-- Add button dropdown content -->
      <template #add>
        <button
          @click="handleAdd"
          class="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
        >
          Dodaj novo
        </button>
      </template>

      <!-- Custom options -->
      <template #options>
        <button class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded">
          Opcija 1
        </button>
      </template>

      <!-- Filters -->
      <template #filters>
        <div class="space-y-2">
          <label class="text-sm font-medium">Filtriraj po:</label>
          <input type="text" class="w-full px-2 py-1 border rounded" />
        </div>
      </template>

      <!-- Custom actions -->
      <template #actions>
        <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded">
          Akcija
        </button>
      </template>
    </DataTableToolbar>

    <!-- Your content here -->
    <div class="p-4 bg-gray-50 rounded">
      <p>Search: {{ search }}</p>
      <p>Page Size: {{ pageSize }}</p>
      <p>Selected: {{ selectedCount }}</p>
    </div>
  </div>
</template>
