<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="itemsPerPage"
    class="elevation-0 data-table"
  >
    <template #item.pelayanan="{ item }">
      <v-chip
        v-for="(serviceKode, idx) in item.pelayanan.slice(0, 2)"
        :key="idx"
        size="small"
        class="mr-1 mb-1 chip-primary-outline"
      >
        {{ getKlinikName(serviceKode) }}
      </v-chip>
      <v-chip
        v-if="item.pelayanan.length > 2"
        size="small"
        class="chip-neutral"
      >
        +{{ item.pelayanan.length - 2 }}
      </v-chip>
    </template>

    <template #item.aksi="{ item }">
      <v-btn
        size="small"
        variant="flat"
        class="btn-edit mr-2"
        @click="$emit('edit', item)"
      >
        <v-icon size="16" left>mdi-pencil</v-icon>
        Edit
      </v-btn>
      <v-btn 
        size="small" 
        variant="outlined" 
        class="btn-delete"
        @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
  },
  getKlinikName: {
    type: Function,
    required: true
  }
});

const headers = [
  { title: "No", value: "no" },
  { title: "Nama Loket", value: "namaLoket" },
  { title: "Kuota", value: "kuota" },
  { title: "Pelayanan", value: "pelayanan" },
  { title: "Pembayaran", value: "pembayaran" },
  { title: "Keterangan", value: "keterangan" },
  { title: "Aksi", value: "aksi", sortable: false },
];

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

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$neutral-600: #89939E;
$primary-600: #FFA532;
$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-primary-outline {
  border: 1px solid $primary-600;
  background-color: transparent !important;
  color: $primary-600 !important;
  font-weight: $font-weight-medium;
  font-size: 12px;
  line-height: 16px;
}

.chip-neutral {
  background-color: $neutral-600 !important;
  color: $neutral-100 !important;
  font-weight: $font-weight-medium;
  font-size: 12px;
  line-height: 16px;
}

.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>