<script lang="ts">
	import type { Entry, Image, Tag } from '$lib/server/db/schema';
	import EntryCard from './EntryCard.svelte';

	interface EntryWithData extends Entry {
		images: Image[];
		tags: Tag[];
	}

	interface Props {
		entries: EntryWithData[];
		availableTags: Tag[];
	}

	let { entries, availableTags }: Props = $props();

	// Separate entries into pinned and unpinned
	let pinnedEntries = $derived(entries.filter(e => e.pinned));
	let unpinnedEntries = $derived(entries.filter(e => !e.pinned));
</script>

{#if entries.length === 0}
	<div class="text-center py-12 text-gray-500">
		<p class="text-lg">No entries yet</p>
		<p class="text-sm mt-1">Use the capture bar below to add your first entry</p>
	</div>
{:else}
	{#if pinnedEntries.length > 0}
		<div class="mb-4">
			<h2 class="text-sm font-medium text-gray-500 uppercase tracking-wide mb-2 px-4 md:px-0">Pinned</h2>
			<div class="divide-y divide-gray-100 md:divide-y-0 md:space-y-3">
				{#each pinnedEntries as entry (entry.id)}
					<EntryCard {entry} {availableTags} />
				{/each}
			</div>
		</div>
	{/if}

	{#if unpinnedEntries.length > 0}
		<div class="divide-y divide-gray-100 md:divide-y-0 md:space-y-3">
			{#each unpinnedEntries as entry (entry.id)}
				<EntryCard {entry} {availableTags} />
			{/each}
		</div>
	{/if}
{/if}
