<template>
  <div class="row justify-content-center">
    <div class="col-xl-10">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Partnership Usage</h4>
          <p class="card-title-desc">
            A quick overview of partnership's usage.
          </p>
          <div class="table-responsive">
            <table class="table table-bordered border-primary mb-0">
              <thead class="table-light">
                <tr>
                  <th></th>
                  <th>Current Month's Total</th>
                  <th>Last Month's Total</th>
                  <th>Total</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(v, index) in usage" :key="index">
                  <th scope="row" class="table-light">{{ v.label }}</th>
                  <td>{{ v.currentMonthTotal }}</td>
                  <td>{{ v.lastMonthTotal }}</td>
                  <td>{{ v.total }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    usage: {
      type: Array,
      required: false,
    },
  },
};
</script>