<script lang="ts">
import * as m from '$lib/paraglide/messages.js';

export type EmptyVariant = 'first-run' | 'filter-empty' | 'inbox-zero';

interface Props {
	variant: EmptyVariant;
}

const { variant }: Props = $props();

const title: string = $derived(
	variant === 'first-run'
		? m.chronik_empty_first_run_title()
		: variant === 'filter-empty'
			? m.chronik_empty_filter_title()
			: m.chronik_inbox_zero_title()
);

const body: string = $derived(
	variant === 'first-run'
		? m.chronik_empty_first_run_body()
		: variant === 'filter-empty'
			? m.chronik_empty_filter_body()
			: ''
);
</script>

<div
	data-testid="chronik-empty-state"
	data-variant={variant}
	class="flex flex-col items-center gap-3 py-10 text-center"
>
	{#if variant === 'first-run'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-10 w-10 text-ink-3"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="1.5"
			aria-hidden="true"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
			/>
		</svg>
	{:else if variant === 'filter-empty'}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-10 w-10 text-ink-3"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="1.5"
			aria-hidden="true"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M3 4h18M6 8h12M9 12h6M10 16h4M11 20h2"
			/>
		</svg>
	{:else}
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-10 w-10 text-accent"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="1.5"
			aria-hidden="true"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M9 12.75L11.25 15L15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
			/>
		</svg>
	{/if}

	<p class="font-sans text-base font-bold text-ink">
		{title}
	</p>
	{#if body}
		<p class="max-w-md font-sans text-sm text-ink-3">
			{body}
		</p>
	{/if}
</div>
