<template>
  <b-col cols="12" lg="6" class="mb-4 mb-lg-0">
    <div class="card h-100">
      <div class="card-header">
        <chart-title :legends="totalSponsored.legends" :title="$t('Dashboard.Landing.Chart.TotalActive.Title')" />
      </div>
      <div v-if="!isLoading('memberDashboardLoading') && totalSponsoredData !== null" class="card-body">
        <bar-chart
          class="chart"
          :labels="totalSponsoredData.labels"
          :data="totalSponsoredData.data"
          :callback="totalSponsoredData.callback"
        />
      </div>
      <div v-else class="text-center text-primary m-lg-auto vh-25 pt-5">
        <b-spinner class="mx-2" />
        <strong class="h4">{{ $t('Common.Loading') }}</strong>
      </div>
    </div>
  </b-col>
</template>
<script>
import { mapGetters } from 'vuex'
import BarChart from './BarChart'
import ChartTitle from './ChartTitle'

export default {
  name: 'SponsorBarChart',
  components: { BarChart, ChartTitle },
  props: ['totalSponsored', 'totalSponsoredData'],
  computed: {
    ...mapGetters(['isLoading', 'getMemberDetails']),
  },
}
</script>
