<template>
  <div class="empty-state">
    <div class="empty-state__icon">
      <v-icon :icon="icon" :size="iconSize" />
    </div>
    <h3 v-if="title" class="empty-state__title">{{ title }}</h3>
    <p v-if="description" class="empty-state__description">{{ description }}</p>
    <div v-if="$slots.action" class="empty-state__action">
      <slot name="action" />
    </div>
  </div>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    icon?: string
    title?: string
    description?: string
    iconSize?: number
  }>(),
  {
    icon: 'mdi-package-variant-remove',
    iconSize: 64,
  }
)
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.empty-state__icon {
  color: var(--color-text-muted);
  opacity: 0.5;
  margin-bottom: var(--space-4);
}

.empty-state__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.empty-state__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  max-width: 300px;
}

.empty-state__action {
  margin-top: var(--space-2);
}
</style>
