<script setup>
/**
 * Reusable KPI tile card for dashboards.
 *
 * Props:
 * - title: label above the value (e.g. "Actieve projecten")
 * - value: main number or text
 * - icon: BaseIcon name (e.g. "briefcase", "list", "users")
 * - iconBgClass: classes for the icon background pill
 *
 * Usage example:
 * <BaseKpiCard
 *   title="Actieve projecten"
 *   :value="kpis.activeProjects"
 *   icon="briefcase"
 *   icon-bg-class="bg-primary-100 dark:bg-primary-900/40"
 *   @click="goTo('/projects')"
 * />
 */

const props = defineProps({
  title: { type: String, default: "" },
  value: { type: [String, Number], default: "" },
  icon: { type: String, default: "" },
  iconBgClass: {
    type: String,
    default: "bg-primary-100 dark:bg-primary-900/40",
  },
  iconColorClass: {
    type: String,
    default: "text-primary-600 dark:text-primary-400",
  },
});
</script>

<template>
  <button
    type="button"
    class="rounded-xl border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800/80 p-5 text-left hover:shadow-md transition-shadow flex items-start justify-between gap-3 w-full"
    v-bind="$attrs"
  >
    <div class="min-w-0">
      <div class="text-base font-medium text-surface-500 dark:text-surface-400">
        <slot name="title">
          {{ title }}
        </slot>
      </div>
      <div class="text-2xl font-bold text-surface-900 dark:text-surface-0 mt-1">
        <slot name="value">
          {{ value }}
        </slot>
      </div>
    </div>
    <span
      v-if="icon || $slots.icon"
      class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center"
      :class="iconBgClass"
      aria-hidden="true"
    >
      <slot name="icon">
        <BaseIcon v-if="icon" :name="icon" :class="iconColorClass" />
      </slot>
    </span>
  </button>
</template>
