<template>
  <div class="overflow-x-auto">
    <h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
    <table class="w-full min-w-[500px] border border-B rounded-lg text-sm">
      <thead class="bg-A text-D">
        <tr>
          <th class="border border-B p-2 text-left">Tanggal</th>
          <th class="border border-B p-2 text-left">Kode Transaksi</th>
          <th class="border border-B p-2 text-left">Pendapatan</th>
          <th class="border border-B p-2 text-center">Detail Item</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="trx in props.transaksi" :key="trx.id" class="hover:bg-A">
          <td class="border border-B p-2">{{ trx.tanggal }}</td>
          <td class="border border-B p-2">{{ trx.kode }}</td>
          <td class="border border-B p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
          <td class="border border-B p-2 text-center">
            <button 
              @click="$emit('detail', trx)"
              class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">
              Detail
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
const props = defineProps({
  transaksi: {
    type: Array,
    default: () => []
  }
})

defineEmits(['detail'])
</script>
