<template>
  <div class="contact-list">
    <h2>Kontakte</h2>
    
    <DataTable 
      :value="contacts" 
      :loading="loading"
      paginator 
      :rows="10"
      tableStyle="min-width: 50rem"
    >
      <Column field="firstName" header="Vorname" sortable></Column>
      <Column field="lastName" header="Nachname" sortable></Column>
      <Column field="email" header="E-Mail" sortable></Column>
      <Column field="company" header="Unternehmen" sortable></Column>
      <Column field="status" header="Status" sortable></Column>
    </DataTable>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

const contacts = ref([]);
const loading = ref(false);

onMounted(async () => {
  loading.value = true;
  // TODO: Fetch from API Platform endpoint /api/contacts
  // Placeholder data for now
  contacts.value = [];
  loading.value = false;
});
</script>

<style scoped lang="scss">
.contact-list {
  h2 {
    margin-bottom: 1.5rem;
  }
}
</style>
