<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.final_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 16px;
  border-bottom: 1px solid #aaaaaa;
  color: #273136;
  text-align: left;
  vertical-align: middle;
}

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

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

.payout-table th {
  font-size: 17px !important;
  font-weight: 700;
  color: #232323;
}

.payout-total-row td {
  font-size: 17px !important;
  font-weight: 700;
  border-bottom: 0;
  color: #4d4e4e;
}

@media (max-width: 640px) {
  .payout-table {
    min-width: 0;
  }

  .payout-table th,
  .payout-table td {
    padding: 8px 12px;
    font-size: 13px;
  }

  .payout-table th:first-child,
  .payout-table td:first-child {
    min-width: 132px;
  }

  .payout-table th,
  .payout-total-row td {
    font-size: 14px !important;
  }
}
</style>
