<script setup>
/**
 * Reusable loading state: spinner + message. Use when loading page or section data.
 */
defineProps({
  message: { type: String, default: "Gegevens laden..." },
});
</script>

<template>
  <div
    class="flex items-center gap-2 text-surface-500 dark:text-surface-400 py-4"
    role="status"
    aria-live="polite"
  >
    <BaseIcon name="spinner" class="pi-spin" />
    <span>{{ message }}</span>
  </div>
</template>
