---
import NotchedBox from '../components/NotchedBox.astro';
import RootLayout from '../layouts/RootLayout.astro';
import FormattedDate from '../components/FormattedDate.astro';
import { Image } from 'astro:assets';
import { getPublishedPosts, getAllTags } from '../lib/blog';

export interface Params {
  selectedTag?: string | undefined;
}

const { selectedTag } = Astro.props;

const tags = await getAllTags();

const posts = await getPublishedPosts( selectedTag );

---

<RootLayout>
<style>
  ul.tags {
    list-style: none;
    margin: 0;
    margin-bottom: 1em;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: baseline;

    li a {
      color: var(--color-gray);
      text-decoration: none;
    }

    li.selected-tag a {
      color: var(--color-gold);
    }
  }

  ul.posts {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;

    li {
      /* Required since flex won't render list-elements correctly. */
      display: block;
    }

    a {
      text-decoration: none;

      .title, .description {
        color: var(--color-light-text);
      }
      .date {
        color: var(--color-gray);
      }
      .entry {
        padding: 0.5em;
      }
      p {
        margin: 0;
      }
    }

    a:hover .title {
      color: var(--color-accent);
    }
  }
  </style>
  <section>
    <ul class="tags">
      {
        tags.map(tag =>
          <li class={ tag === selectedTag ? "selected-tag" : "" }>
            <a href={`/blog/tag/${tag}`}>
              <NotchedBox color={ tag === selectedTag ? "gold" : "gray" } fillNotches={ tag === selectedTag ? "right" : "none"}>
                {tag}
              </NotchedBox>
            </a>
          </li>
        )
      }
    </ul>
  </section>
  <section>
    <ul class="posts">
      {
        posts.map((post) => (
          <li>
            <a href={`/blog/${post.id}/`}>
              <NotchedBox fillNotches="left">
                <div class="entry">
                  {post.data.heroImage && (
                    <Image width={720} height={360} src={post.data.heroImage} alt="" />
                  )}
                  <h4 class="title">{post.data.title}</h4>
                  <p class="date">
                    <FormattedDate date={post.data.pubDate} />
                  </p>
                  { post.data.description && 
                    <p class="description">
                      {post.data.description}
                    </p>
                  }
                </div>
              </NotchedBox>
            </a>
          </li>
        ))
      }
    </ul>
  </section>
</RootLayout>
