---
import { getUniqueTags, filterPostsByTag, getAllPosts } from '../../libs/posts.ts'

import TagList from '../../components/post/post-tag-list.astro';

import Root from '../../layouts/Root.astro';
import Main from '../../layouts/Bundle.astro';
import Column from '../../components/post/post-card-column.astro';

export async function getStaticPaths() {
  const posts = getAllPosts();
  const uniqueTags = getUniqueTags(posts);

  return uniqueTags.map((tag: any) => ({
    params: { tag: tag }
  }));
}

const { tag } = Astro.params;
const posts = filterPostsByTag(getAllPosts(), tag);

---
<Root
  title={`${tag}`}
  description={`Ver todos los posts con el tag - ${tag}`}
  path={`/blog/${tag}/`}>
  <Main className="container content-space-t-3">
    <div class="content-space-b-1">
      <div class="w-md-75 w-lg-50 text-center mx-md-auto">
        <h1 class="display-4 text-white">{tag.toUpperCase()}</h1>
      </div>
    </div>
    <div class="col-md-5 mb-7">
      <div class="d-md-flex align-items-md-center text-center text-md-start">
        <span class="d-block me-md-3 mb-2 mb-md-1 text-white">Tags:</span>
        <TagList />
      </div>
    </div>  
    <div id="blogsCards" class="row mb-3">
      { posts.slice(0, 10).map((post: any) => ( <Column post={post}/> )) }
    </div>
  </Main>
</Root>
