<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="itemsPerPage"
    class="elevation-0 data-table"
  >
    <template #item.shift="{ item }">
      <v-chip size="small" class="chip-secondary">
        {{ item.shift }}
      </v-chip>
    </template>
    
    <template #item.totalQuota="{ item }">
      <span class="body-2 text-semibold">{{ item.totalQuota }}</span>
    </template>
    
    <template #item.aksi="{ item }">
      <v-btn
        size="small"
        class="btn-edit mr-2"
        variant="flat"
        @click="$emit('edit', item)"
      >
        <v-icon size="16" left>mdi-pencil</v-icon>
        Edit
      </v-btn>
      <v-btn
        size="small"
        class="btn-delete"
        variant="outlined"
        @click="$emit('delete', item)"
      >
        <v-icon size="16" left>mdi-delete</v-icon>
        Delete
      </v-btn>
    </template>
  </v-data-table>
</template>

<script setup>
const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  itemsPerPage: {
    type: Number,
    default: 10
  }
});

const headers = [
  { title: 'No', value: 'no', sortable: true },
  { title: 'Kode', value: 'kode', sortable: true },
  { title: 'Nama Klinik', value: 'nama', sortable: true },
  { title: 'Shift', value: 'shift', sortable: true },
  { title: 'Total Kuota', value: 'totalQuota', sortable: true },
  { title: 'Aksi', value: 'aksi', sortable: false },
];

defineEmits(['edit', 'delete']);
</script>

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$neutral-800: #4D4D4D;
$primary-600: #FFA532;
$secondary-600: #0671E0;
$danger-600: #E02B1D;
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-medium: 500;
$font-weight-semibold: 600;

.data-table {
  font-family: $font-family-base;
}

.chip-secondary {
  background-color: $secondary-600 !important;
  color: $neutral-100 !important;
  font-weight: $font-weight-medium;
}

.body-2 {
  font-size: 16px;
  line-height: 24px;
}

.text-semibold {
  font-weight: $font-weight-semibold !important;
}

.btn-edit {
  background-color: $primary-600 !important;
  color: $neutral-100 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 14px;
  line-height: 20px;
}

.btn-delete {
  border-color: $danger-600 !important;
  color: $danger-600 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 14px;
  line-height: 20px;
}
</style>