<script setup>
import {ref, defineProps} from 'vue';
import { onChangeCall } from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";

const props = defineProps({
    title: String,
    subtitle: String,
    count: Number,
    out_of: Number,
    icon: String,
    color: String,
    buttons: Array,
    parseFunction: {
        type: Function,
        default: (value) => {
            return value;
        }
    },
    label_quantity: {
        type: String,
        default: 'Antal solgte'
    },
    label_quantity_suffix: {
        type: String,
        default: ''
    },
    label_out_of: {
        type: String,
        default: 'Mulige solgte',
    },
    label_out_of_suffix: {
        type: String,
        default: ''
    }
})

</script>

<template>
  <div class="card">
    <div class="card-content">
      <div class="media">
        <div class="media-left is-flex p-2">
          <figure class="image is-48x48">
            <span class="icon" :style="{ color: color }">
              <i :class="icon" class="fa-3x"></i>
            </span>
          </figure>
        </div>
        <div class="media-content">
          <p class="title is-4">{{ title }}</p>
          <p class="subtitle is-6">{{ subtitle }}</p>
        </div>
      </div>
      <div class="content has-text-centered">
        <p class="title is-1"><span>{{ props.parseFunction(count) }}{{props.label_quantity_suffix}}</span> <span class="has-text-grey-light is-size-6" v-if="out_of > 0">/ {{ out_of }}{{props.label_out_of_suffix}}</span></p>
        <p class="subtitle is-6"><span>{{props.label_quantity}}</span><span v-if="out_of > 0" class="has-text-grey"> / {{props.label_out_of}}</span></p>
      </div>
    </div>
    <footer class="card-footer">
      <a
          v-for="button in buttons"
          :key="button.id"
          class="card-footer-item"
          :href="button.href"
      >
        <span class="icon">
          <i :class="button.icon"></i>
        </span>
        <span>{{ button.text }}</span>
      </a>
    </footer>
  </div>
</template>

<style scoped>

</style>