<template>
  <div class="gp-queue-list-container">
    <div class="list-header">
      <span class="title">DAFTAR ANTRIAN</span>
      <span class="count-badge">{{ patients.length }}</span>
    </div>
    <div class="list-body">
      <GpQueueListItem
        v-for="patient in patients"
        :key="patient.id || patient.noAntrian"
        :queue-number="patient.noAntrian"
        :status="patient.status"
        :is-active="patient.isActive"
        @view-detail="$emit('view-detail', patient)"
        @process-patient="$emit('process-patient', patient)"
      />
    </div>
  </div>
</template>

<script setup>
import GpQueueListItem from './GpQueueListItem.vue';

defineProps({
  patients: { type: Array, default: () => [] }
});

defineEmits(['view-detail', 'process-patient']);
</script>

<style scoped>
.gp-queue-list-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: white;
  min-height: 200px;
}
.list-header {
  padding: 12px 16px;
  background: #EEF2F6; /* Light blue-gray from design */
  border-bottom: 1px solid var(--gp-border, #e5e7eb);
  display: flex;
  align-items: center;
  gap: 8px;
}
.title {
  font-size: 10px;
  font-weight: 700;
  color: var(--gp-text-secondary, #6b7280);
}
.count-badge {
  background: #D1D5DB; /* Gray */
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}
.list-body {
  overflow-y: auto;
}
</style>
