<template>
  <div class="table-wrap">
    <table class="payout-table">
      <thead>
        <tr>
          <th>Unidade</th>
          <th>Reservas</th>
          <th>Valor</th>
        </tr>
      </thead>

      <tbody>
        <tr
          v-for="item in rows"
          :key="item.property_id"
        >
          <td>{{ item.property_label }}</td>
          <td>{{ formatInteger(item.reservations_count) }}</td>
          <td>{{ formatCurrency(item.owner_payout_amount) }}</td>
        </tr>

        <tr class="payout-total-row">
          <td>Total</td>
          <td>{{ formatInteger(totalReservations) }}</td>
          <td>{{ formatCurrency(totalValue) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
defineProps({
  rows: {
    type: Array,
    default: () => [],
  },
  totalReservations: {
    type: Number,
    default: 0,
  },
  totalValue: {
    type: Number,
    default: 0,
  },
});

const formatCurrency = (value) => {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
    minimumFractionDigits: 2,
  }).format(Number(value ?? 0));
};

const formatInteger = (value) => {
  return Number(value ?? 0).toLocaleString("pt-BR");
};
</script>

<style scoped lang="scss">
.table-wrap {
  overflow-x: auto;
}

.payout-table {
  width: 100%;
  border-collapse: collapse;
}

.payout-table th,
.payout-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(8, 81, 76, 0.1);
  color: #273136;
  text-align: left;
  vertical-align: middle;
}

.payout-table th:nth-child(2),
.payout-table th:nth-child(3),
.payout-table td:nth-child(2),
.payout-table td:nth-child(3) {
  text-align: right;
}

.payout-table th {
  font-size: 12px;
  font-weight: 700;
  color: #657177;
}

.payout-total-row td {
  font-weight: 700;
  border-bottom: 0;
}
</style>
