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

type NotificationDTO = {
	id: string;
	type: 'REPLY' | 'MENTION';
	documentId?: string;
	referenceId?: string;
	annotationId?: string;
	read: boolean;
	createdAt: string;
	actorName?: string;
};

interface Props {
	mentions: NotificationDTO[];
}

let { mentions }: Props = $props();
</script>

{#if mentions.length > 0}
	<div data-testid="dashboard-mentions" class="rounded-sm border border-line bg-surface p-6">
		<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
			{m.dashboard_notifications_heading()}
		</h2>
		<div>
			{#each mentions as mention (mention.id)}
				<div class="flex items-center gap-3 border-b border-line py-2 last:border-0">
					{#if mention.documentId}
						<a
							href={mention.annotationId
								? `/documents/${mention.documentId}?commentId=${mention.referenceId}&annotationId=${mention.annotationId}`
								: `/documents/${mention.documentId}?commentId=${mention.referenceId}`}
							class="font-serif text-lg text-ink hover:text-ink-2 hover:underline"
							>{mention.actorName ?? ''}</a
						>
						<span class="font-sans text-xs text-gray-400">
							{mention.type === 'MENTION'
								? m.dashboard_notification_mentioned()
								: m.dashboard_notification_replied()}
						</span>
					{:else}
						<span class="font-serif text-lg text-ink">{mention.actorName ?? ''}</span>
					{/if}
				</div>
			{/each}
		</div>
		<div class="mt-4 border-t border-line pt-4">
			<a
				href="/notifications"
				class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
				>{m.notification_history_view_link()}</a
			>
		</div>
	</div>
{/if}
