<script setup lang="ts">
import { Trash2 } from 'lucide-vue-next'

interface Diagnosa {
  id: number
  diagnosa: string
  icd: string
}

const modelValue = defineModel<Diagnosa[]>({ default: [] })

function removeItem(id: number) {
  modelValue.value = modelValue.value.filter((item) => item.id !== id)
}
</script>

<template>
  <div class="rounded-lg border bg-white shadow-sm">
    <Table>
      <TableHeader class="bg-gray-50">
        <TableRow>
          <TableHead class="w-[50px] text-center">NO.</TableHead>
          <TableHead>DIAGNOSA</TableHead>
          <TableHead class="w-[120px]">ICD-X</TableHead>
          <TableHead class="w-[80px] text-center">AKSI</TableHead>
        </TableRow>
      </TableHeader>

      <TableBody>
        <TableRow
          v-for="(item, i) in modelValue"
          :key="item.id"
        >
          <TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
          <TableCell>{{ item.code }}</TableCell>
          <TableCell>{{ item.name }}</TableCell>
          <TableCell class="text-center">
            <Button
              variant="ghost"
              size="icon"
              @click="removeItem(item.id)"
            >
              <Trash2 class="h-4 w-4 text-gray-500 hover:text-red-500" />
            </Button>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </div>
</template>
