<script setup lang="ts">
import type { HTMLAttributes } from 'vue';
import { cn } from '@/lib/utils';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyTitle,
} from '@/components/ui/empty';

withDefaults(
    defineProps<{
        title?: string;
        description?: string;
        plain?: boolean;
        class?: HTMLAttributes['class'];
    }>(),
    {
        title: 'Data tidak ditemukan',
        description: 'Silakan lakukan pencarian atau filter untuk menemukan data yang Anda cari.',
        plain: false,
    }
);
</script>

<template>
    <div :class="cn(!plain && 'rounded-md border px-6 py-10', $props.class)">
        <Empty>
            <EmptyHeader>
                <EmptyTitle>
                    <slot name="title">{{ title }}</slot>
                </EmptyTitle>
                <EmptyDescription>
                    <slot name="description">{{ description }}</slot>
                </EmptyDescription>
            </EmptyHeader>
            <slot />
        </Empty>
    </div>
</template>
