<script setup lang="ts">
import { WaitingScreenState } from "ChillMainAssets/types";

interface Props {
  state: WaitingScreenState;
}

const props = defineProps<Props>();
</script>

<template>
  <div id="waiting-screen">
    <div
      v-if="props.state === 'pending' && !!$slots.pending"
      class="alert alert-danger text-center"
    >
      <div>
        <slot name="pending"></slot>
      </div>

      <div>
        <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
        <span class="sr-only">Loading...</span>
      </div>
    </div>

    <div
      v-if="props.state === 'stopped' && !!$slots.stopped"
      class="alert alert-info"
    >
      <div>
        <slot name="stopped"></slot>
      </div>
    </div>

    <div
      v-if="props.state === 'failure' && !!$slots.failure"
      class="alert alert-danger text-center"
    >
      <div>
        <slot name="failure"></slot>
      </div>
    </div>

    <div
      v-if="props.state === 'ready' && !!$slots.ready"
      class="alert alert-success text-center"
    >
      <div>
        <slot name="ready"></slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
#waiting-screen {
  > .alert {
    min-height: 350px;
  }
}
</style>
