<script lang="ts" setup>
import type { ActionItem } from '@factor/api'
import { vue } from '@factor/api'
import ElSpinner from './ElSpinner.vue'
import ElButton from './ElButton.vue'

const props = defineProps({
  loading: { type: Boolean, default: false },
  text: { type: String, default: '' },
  actions: { type: Array as vue.PropType<ActionItem[]>, default: undefined },
  size: {
    type: String as vue.PropType<'xs' | 'md'>,
    default: undefined,
  },
})

async function handleOnClick(event: MouseEvent, item: ActionItem) {
  event.preventDefault()
  event.stopPropagation()
  if (item.onClick)
    await item.onClick({ event, item })
}

const paddingClass = vue.computed(() => {
  if (props.size === 'xs')
    return ''
  else return 'p-8 md:py-12'
})
</script>

<template>
  <div
    class="zero-state flex items-center justify-center rounded-lg"
    :class="paddingClass"
  >
    <div v-if="loading" class="p-12">
      <ElSpinner class="text-theme-200 m-auto h-12 w-12" />
    </div>
    <div v-else class="w-full max-w-md">
      <div
        class="inline-block w-full rounded-lg p-4 text-left align-bottom transition-all sm:align-middle"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-headline"
      >
        <div>
          <h3
            class="text-center font-semibold"
            :class="size === 'xs' ? 'text-xs' : 'text-base'"
            v-html="text"
          />
        </div>
        <div
          v-if="actions?.length"
          class="mt-4 flex justify-center space-x-4 space-y-4 text-center sm:mt-6"
        >
          <ElButton
            v-for="(act, i) in actions"
            :key="i"
            :to="act.href"
            :href="act.href"
            :btn="act.btn || 'default'"
            :size="size"
            @click="act.onClick ? handleOnClick($event, act) : null"
          >
            {{ act.name }}
          </ElButton>
        </div>
      </div>
    </div>
  </div>
</template>
