<script>
export default {
  props: {
    title: {type: String, default: ""},
    icon: {type: String, default: ""},
    value: {type: [String, Number], default: "0"},
    has_footer: {type: Boolean, default: false},
    state: {type: String, default: "normal"},
    percentage: {type: String, default: "0"}
  }
}
</script>
<template>
  <div class="card mini-stats-wid shadows">
    <div class="card-body">
      <div class="media">
        <div class="media-body">
          <p class="text-muted text-uppercase font-weight-bold">{{ title }}</p>
          <h4 class="mb-0 font-weight-bold">{{ value }}</h4>
        </div>
        <div class="mini-stat-icon avatar-sm align-self-center rounded-circle bg-primary">
          <span class="avatar-title">
            <i :class="`${icon} font-size-24`"></i>
          </span>
        </div>
      </div>
    </div>
    <div class="card-footer bg-primary-50 rounded-bottom">
      <div v-if="has_footer">
        <div v-if="state === 'normal'" class="pt-3 ">
          <span class="float-left font-weight-bold"><i class="bx bx-shield-alt-2  "></i> {{ percentage }} % </span>
          <span class="float-right font-size-11"> dari kemarin</span>
        </div>
        <div v-else-if="state === 'up'" class="pt-3 text-success">
          <span class="float-left font-weight-bold"><i class="bx bx-chevrons-up "></i> {{ percentage }} % </span>
          <span class="float-right font-size-11"> dari kemarin</span>
        </div>
        <div v-else-if="state === 'down'" class="pt-3 text-danger">
          <span class="float-left font-weight-bold"><i class="bx bx-chevrons-down "></i> {{ percentage }} % </span>
          <span class="float-right font-size-11"> dari kemarin</span>
        </div>
      </div>
      <div class="" v-else>-</div>
    </div>
  </div>
</template>