<script setup lang="ts">
import type { ProcedureRoom } from '~/models/procedure-room';
import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';

const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
defineProps<{
  data: ProcedureRoom[]
  pickMode: 'single' | 'multi'
}>()

const emit = defineEmits<{
  pick: [item: ProcedureRoom]
}>()

function pick(item: ProcedureRoom) {
  emit('pick', item)
}
</script>

<template>
  <div class="mb-5">
    <div class="font-semibold text-sm 2xl:text-base mb-2">
      Daftar Pilihan Ruang Tindakan
    </div>
    <div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
      <!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
      <div v-if="data.length > 0" v-for="item, idx in data">
        <Button
          :variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
          class="w-full"
          type="button"
          @click="pick(item)"
        >
          {{ item.infra?.name }}
        </Button>
      </div>
      <div v-else  class="col-span-full text-center text-sm text-gray-500">
        <div>Tidak ada data ruang tindakan.</div>
      </div>
    </div>
  </div>
</template>
