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

  <script setup>
  import { ref, onMounted } from "vue"

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

  defineEmits(['detail'])

  onMounted(() => {
    console.log(props.transaksi);

  })
  </script>
