<script lang="ts">
    import Banner2 from "$lib/banner2.svelte";
    import Content from "$lib/viewport/content.svelte";
    import { BlogPostTag, posts, type BlogPostDetails, type BlogPostLink } from "./posts";
    import BlogGallery from "$lib/lists/blog-gallery.svelte";

    let filter = $state(BlogPostTag.NULL);
    let filteredPosts = filterPosts();

    function setFilter(tag: BlogPostTag) {
        filter = tag;
        console.log(filter);
    }

    function filterPosts(): BlogPostLink[] {
        if (filter == BlogPostTag.NULL) {
            return posts;
        }

        let a: BlogPostLink[] = posts.filter((post) => post.post.tags.includes(filter))
        console.log(a);
        return a;
    }
</script>

<svelte:head>
    <title>Blog | denizk0461</title> 
</svelte:head>

<Content>
	<Banner2
		title="Blog"
        banner="robert.webp"
        bannerAlt="View at a tram bridge rising and then curving to the left." />

    <!-- TODO descriptions on filter click -->
    <div class="tag-filter-container">
        {#each Object.values(BlogPostTag) as tag}
            <button class="post-tag tag-filter" onclick={() => {
                setFilter(tag)
            }}>{tag}</button>
        {/each}
    </div>

    <BlogGallery posts={filterPosts()} />
</Content>

<style>
    .tag-filter-container {
        display: flex;
        gap: 12px;
        margin-bottom: 8px;
    }

    .tag-filter {
        width: fit-content;
        font-size: 0.9rem;
        color: var(--color-text);
        padding: 8px;
        border-radius: 12px;
        cursor: pointer;
    }

    .tag-filter:hover {
        background-color: aqua;
    }
</style>