<template>
  <div>
    <!-- @slot Loading message when data is loading -->
    <slot
      v-if="status === 'isLoading'"
      name="loading">
      <h3>Loading...</h3>
    </slot>
    <!-- @slot Error message when something failed  -->
    <slot
      v-if="status === 'hasError'"
      name="error">
      <h3>
        Custom error message on fail
      </h3>
    </slot>
    <!-- @slot Message when data is empty or incomplete -->
    <slot
      v-if=" status === 'isEmpty'"
      name="empty">
      <h3>
        Data incomplete, please try again in a while.
      </h3>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'MResponseControl',
  props: {
    /**
     * @values isLoading, hasError, isEmpty
     */
    status: {
      type: String,
      default: 'isLoading',
      validator: (prop) => [
        'isLoading',
        'hasError',
        'isEmpty',
      ].includes(prop),
    },
  },
};
</script>
