<script setup lang="ts">
import { UiIcon } from '@/components/UiIcon';
import type { UiEmptyProps } from './types';

defineOptions({
  name: 'UiEmpty',
});

const props = withDefaults(defineProps<UiEmptyProps>(), {
  title: undefined,
  description: undefined,
  icon: undefined,
});
</script>

<template>
  <div class="flex flex-col items-center justify-center py-12 text-center">
    <div class="mb-4 text-muted-foreground" aria-hidden="true">
      <component :is="props.icon" v-if="props.icon" class="size-12" />
      <UiIcon v-else name="inbox" :size="48" />
    </div>

    <h3 v-if="props.title" class="heading-s mb-2 text-foreground">
      {{ props.title }}
    </h3>

    <p
      v-if="props.description"
      class="body-14-regular max-w-sm text-muted-foreground"
    >
      {{ props.description }}
    </p>

    <div v-if="$slots.default" class="mt-6">
      <slot />
    </div>
  </div>
</template>
