<script lang="ts">
    import BookmarkList from '$lib/components/BookmarkList.svelte';

    let { data } = $props();
    const authenticated = $derived(data.authenticated);
    const bookmarks = $derived(data.bookmarks);
    const error = $derived(data.error);
</script>

<h1>Bookmarks</h1>

{#if error}
    <p class="error" role="alert" data-testid="bookmarks-error">
        Couldn't load bookmarks: {error}
    </p>
{:else if !authenticated}
    <p class="hint" data-testid="bookmarks-signin">
        <a href="/login">Sign in</a> to see your bookmarks.
    </p>
{:else if bookmarks.length === 0}
    <p class="hint" data-testid="bookmarks-empty">No bookmarks yet.</p>
{:else}
    <BookmarkList {bookmarks} />
{/if}

<style>
    .error {
        color: var(--danger);
    }

    .hint {
        color: var(--text-muted);
    }
</style>
