<script setup lang="ts">
const props = defineProps<{
  size?: string;
  customMessage?: string;
}>();
</script>

<template>
  <div
    class="flex h-[30vh] flex-col items-center justify-center"
    :style="{ width: props.size || '50%' }"
  >
    <div class="relative size-[180px]">
      <ClientOnly>
        <Lottie class="absolute" name="empty" width="100%" height="100%" />
      </ClientOnly>
    </div>
    <p class="text-center text-lg font-semibold">
      {{ props.customMessage || $t("emptyState") }}
    </p>
  </div>
</template>
