<script setup lang="ts">
import { ref } from 'vue'
import { Trash2 } from 'lucide-vue-next'
// import { Button } from '@/components/ui/button'
// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'

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

const list = ref<Diagnosa[]>([{ id: 1, diagnosa: 'Acute appendicitis', icd: 'K35' }])

function removeItem(id: number) {
  list.value = list.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 list" :key="item.id">
          <TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
          <TableCell>{{ item.diagnosa }}</TableCell>
          <TableCell>{{ item.icd }}</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>
