<script setup>
import { defineProps, useSlots } from 'vue';
const props = defineProps({
  exists: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: ''
  },
  isLoading: {
    type: Boolean,
    default: false
  }
});

const slots = useSlots();
console.log(slots);
</script>

<template>
  <div>
    <slot v-if="exists && !isLoading" />
    <slot name="loading" v-else-if="isLoading" />
    <slot name="error" v-else-if="slots.error" />
    <div v-else>
      <div class="message is-danger">
        <div class="message-body">
          <h2>404 Not Found</h2>
          <p>The requested resource could not be found.</p>
        </div>
      </div>
      <div v-if="error">
        <div class="message mb-6">
          <div class="message-header">
            <p>Error message</p>
          </div>
          <div class="message-body">
            <p>{{ error }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>