<script setup lang="ts">
/**
 * Standaard KPI-tegel: icon + waarde, titel, optionele ondertitel.
 * Zelfde structuur als event-statistieken; kaart-chrome is altijd gelijk (geen gekleurde rand tenzij borderAccent).
 */
type BorderAccent = 'primary' | 'warning' | 'info' | 'success' | 'error'

const props = withDefaults(
  defineProps<{
    icon: string
    iconColor?: string
    value: string | number
    title: string

    /** Ondertitel; ontbreekt er een, dan blijft één regelhoogte gereserveerd voor gelijke tegelhoogtes. */
    subtitle?: string
    clickable?: boolean
    borderAccent?: BorderAccent
  }>(),
  {
    iconColor: 'primary',
    clickable: false,
  },
)

const emit = defineEmits<{
  click: []
}>()

function onClick() {
  if (props.clickable)
    emit('click')
}
</script>

<template>
  <VCard
    class="flex-grow-1 w-100 d-flex flex-column"
    :class="[
      clickable ? 'cursor-pointer' : '',
      borderAccent ? `card-border-shadow-${borderAccent}` : '',
    ]"
    @click="onClick"
  >
    <VCardText class="flex-grow-1 d-flex flex-column">
      <div class="d-flex align-center mb-1">
        <VAvatar
          :color="iconColor"
          variant="tonal"
          size="44"
          rounded
          class="me-4"
        >
          <VIcon
            :icon="icon"
            size="28"
          />
        </VAvatar>
        <h4 class="text-h4 mb-0">
          {{ value }}
        </h4>
      </div>
      <p class="mb-1">
        {{ title }}
      </p>
      <p class="mb-0 text-body-secondary text-sm">
        {{ subtitle ?? '\u00a0' }}
      </p>
    </VCardText>
  </VCard>
</template>
