<script lang="ts" setup>
defineOptions({ name: 'BglEmptyState' })
import type { IconType } from '@bagelink/vue'
import { Icon } from '@bagelink/vue'
import { useSlots } from 'vue'
import Btn from './Btn.vue'

/**
 * Placeholder for empty lists / no-results / zero states.
 * - `icon` + `title` + `description` for the common case.
 * - `actionLabel` (+ `to`/`href` or @action) renders a primary button.
 * - Slots: `#icon`, default (body text), `#action` for full control.
 * - `compact` for tight inline spots (table empties, small cards).
 */
const {
	icon = 'inbox',
	title = '',
	description = '',
	actionLabel = '',
	actionIcon,
	to,
	href,
	compact = false,
	class: className = '',
} = defineProps<{
	icon?: IconType | 'none'
	title?: string
	description?: string
	actionLabel?: string
	actionIcon?: IconType
	to?: string | Record<string, any>
	href?: string
	compact?: boolean
	class?: string
}>()

const emit = defineEmits<{ action: [] }>()
const slots = useSlots()
</script>

<template>
	<div class="bgl-empty txt-center" :class="[{ 'bgl-empty--compact': compact }, className]">
		<div v-if="slots.icon || icon !== 'none'" class="bgl-empty-icon flex-center">
			<slot name="icon"><Icon :icon="icon" :size="compact ? 1.6 : 2.2" /></slot>
		</div>
		<p v-if="title" class="bgl-empty-title m-0">{{ title }}</p>
		<p v-if="description || slots.default" class="bgl-empty-desc m-0">
			<slot>{{ description }}</slot>
		</p>
		<div v-if="slots.action || actionLabel" class="bgl-empty-action">
			<slot name="action">
				<Btn :color="'primary'" :thin="compact" :icon="actionIcon" :value="actionLabel" :to="to" :href="href" @click="emit('action')" />
			</slot>
		</div>
	</div>
</template>

<style scoped>
.bgl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2.5rem 1.5rem;
	color: var(--bgl-text-soft, var(--bgl-gray));
}
.bgl-empty--compact {
	gap: 0.5rem;
	padding: 1.25rem 1rem;
}
.bgl-empty-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--bgl-gray-tint, color-mix(in srgb, var(--bgl-gray) 14%, transparent));
	color: var(--bgl-gray);
}
.bgl-empty--compact .bgl-empty-icon {
	width: 2.5rem;
	height: 2.5rem;
}
.bgl-empty-title {
	font-weight: 600;
	font-size: 1rem;
	color: var(--bgl-text-color, inherit);
}
.bgl-empty-desc {
	font-size: 0.875rem;
	max-width: 32ch;
}
.bgl-empty-action {
	margin-top: 0.25rem;
}
</style>
