<template>
  <div class="partner-dashboard">

    <div class="dashboard-title-page">
      {{ $t("parceiro.dashboard.title") }}
    </div>

    <div class="row q-col-gutter-sm">

      <div class="col-12 col-md-6">
        <q-card flat class="dashboard-card">
          <q-card-section class="dashboard-content">

            <q-icon
              name="mdi-message-text-outline"
              size="20px"
              color="violet-normal"
            />

            <div class="q-mt-sm dashboard-number">
              {{ stats.authorization }}
            </div>

            <div class="dashboard-label">
              {{ $t("parceiro.dashboard.authorization") }}
            </div>

          </q-card-section>
        </q-card>
      </div>

      <div class="col-12 col-md-6">
        <q-card flat class="dashboard-card">
          <q-card-section class="dashboard-content">

            <q-icon
              name="mdi-clock-outline"
              size="20px"
              color="violet-normal"
            />

            <div class="q-mt-sm dashboard-number">
              {{ stats.scheduling }}
            </div>

            <div class="dashboard-label">
              {{ $t("parceiro.dashboard.scheduling") }}
            </div>

          </q-card-section>
        </q-card>
      </div>

      <div class="col-12 col-md-6">
        <q-card flat class="dashboard-card">
          <q-card-section class="dashboard-content">

            <q-icon
              name="mdi-account-group-outline"
              size="20px"
              color="violet-normal"
            />

            <div class="q-mt-sm dashboard-number">
              {{ stats.completed }}
            </div>

            <div class="dashboard-label">
              {{ $t("parceiro.dashboard.completed") }}
            </div>

          </q-card-section>
        </q-card>
      </div>

      <div class="col-12 col-md-6">
        <q-card flat class="dashboard-card">
          <q-card-section class="dashboard-content">

            <q-icon
              name="mdi-alert-circle-outline"
              size="20px"
              color="violet-normal"
            />

            <div class="q-mt-sm dashboard-number">
              {{ stats.not_authorized }}
            </div>

            <div class="dashboard-label">
              {{ $t("parceiro.dashboard.not_authorized") }}
            </div>

          </q-card-section>
        </q-card>
      </div>

    </div>

  </div>
</template>

<script setup>
defineProps({
  stats: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.partner-dashboard {
  width: 100%;
}

.dashboard-title-page {
  font-size: 20px;
  font-weight: 700;
  color: #702082;
  margin-bottom: 12px;
}

.dashboard-card {
  border-radius: 6px;
  background: white;
}

.dashboard-content {
  padding: 10px 14px;
}

.dashboard-number {
  font-size: 18px;
  font-weight: 500;
  color: #702082;
  line-height: 1;
}

.dashboard-label {
  font-size: 11px;
  color: #555;
  margin-top: 8px;
}
</style>