<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="itemsPerPage"
    class="elevation-0 data-table"
  >
    <template v-slot:item.namaKlinik="{ item }">
      <v-chip size="small" class="chip-success-outline">
        {{ item.kodeKlinik }}
      </v-chip>
      <span class="ml-2 body-3 text-medium">{{ item.namaKlinik }}</span>
    </template>
    
    <template v-slot:item.aksi="{ item }">
      <v-btn
        size="small"
        @click="$emit('edit', item)"
        class="btn-edit mr-2"
        variant="flat"
      >
        <v-icon size="16" left>mdi-pencil</v-icon>
        Edit
      </v-btn>
      <v-btn
        size="small"
        @click="$emit('delete', item)"
        class="btn-delete"
        variant="outlined"
      >
        <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: 'Nama Klinik', value: 'namaKlinik', sortable: true },
  { title: 'Kode', value: 'kodeKlinik', sortable: true },
  { title: 'Nama Ruang', value: 'namaRuang', sortable: true },
  { title: 'Aksi', value: 'aksi', sortable: false },
];

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

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

.body-3 {
  font-size: 14px;
  line-height: 20px;
}

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

.btn-edit {
  background-color: $success-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>