<template>
  <div class="flex flex-col items-center justify-center p-8 text-center">
    <div class="rounded-full bg-muted p-4 mb-4">
      <component :is="icon" class="h-8 w-8 text-muted-foreground" />
    </div>
    <h3 class="text-lg font-semibold mb-2">{{ title }}</h3>
    <p class="text-muted-foreground mb-4 max-w-sm">{{ description }}</p>
    <Button v-if="actionText" @click="$emit('action')" :variant="actionVariant">
      {{ actionText }}
    </Button>
  </div>
</template>

<script setup lang="ts">
import { Component } from 'vue'
import { Button } from '@/components/ui/button'
import { FileX } from 'lucide-vue-next'

interface Props {
  icon?: Component
  title: string
  description: string
  actionText?: string
  actionVariant?: 'default' | 'outline' | 'secondary'
}

withDefaults(defineProps<Props>(), {
  icon: FileX,
  actionVariant: 'default'
})

defineEmits<{
  action: []
}>()
</script>