<script lang="ts">
	interface Props {
		title: string;
		description?: string;
		actionLabel?: string;
		actionHref?: string;
		onaction?: () => void;
		/**
		 * The icon prop was historically accepted but never rendered —
		 * the markup uses the breathing-dot "empty-mark" element instead.
		 * Kept for source compatibility (call sites still pass it) and
		 * to avoid a noisy svelte-check sweep, but the value is ignored.
		 */
		icon?: 'projects' | 'instances' | 'deploys' | 'registries' | 'volumes' | 'users';
	}

	const {
		title,
		description = '',
		actionLabel = '',
		actionHref = '',
		onaction,
	}: Props = $props();
</script>

<div class="empty">
	<div class="empty-mark">
		<span></span><span></span><span></span>
	</div>

	<h3 class="empty-title">{title}</h3>

	{#if description}
		<p class="empty-desc">{description}</p>
	{/if}

	{#if actionLabel}
		{#if actionHref}
			<a href={actionHref} class="forge-btn">
				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<path d="M5 12h14" /><path d="M12 5v14" />
				</svg>
				<span>{actionLabel}</span>
			</a>
		{:else if onaction}
			<button type="button" onclick={onaction} class="forge-btn">
				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<path d="M5 12h14" /><path d="M12 5v14" />
				</svg>
				<span>{actionLabel}</span>
			</button>
		{/if}
	{/if}
</div>

<style>
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		text-align: center;
		padding: 4rem 2rem;
		border: 1px dashed var(--border-primary);
		border-radius: var(--radius-2xl);
		background: var(--surface-card);
	}
	.empty-mark {
		display: inline-flex; gap: 4px;
		margin-bottom: 1.5rem;
	}
	.empty-mark span {
		width: 10px; height: 10px; border-radius: 50%;
		background: var(--border-input);
	}
	.empty-mark span:nth-child(2) {
		background: var(--color-brand-600);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-500) 18%, transparent);
		animation: forge-breathe 2.4s ease-in-out infinite;
	}
	.empty-title {
		font-family: var(--font-family-sans);
		font-weight: 700;
		font-size: 1.5rem;
		letter-spacing: -0.01em;
		line-height: 1.2;
		margin: 0 0 0.4rem;
		color: var(--text-primary);
	}
	.empty-desc {
		color: var(--text-secondary);
		max-width: 42ch;
		font-size: 0.95rem;
		line-height: 1.5;
		margin: 0 0 1.5rem;
	}
	.forge-btn { margin-top: 0.5rem; }
</style>
