---
import BaseLayout from "@components/base/BaseLayout.astro";
import BlogCard from "@components/blog/Card.astro";
import Pagination from "@components/common/Pagination.astro";
import PageHeader from "@components/common/PageHeader.astro";
import BlogSidebar from "@components/blog/Sidebar.astro";
import type { BlogEntry } from "@/types";

interface Props {
  entryIndex: BlogEntry;
  entries: BlogEntry[];
  tags: string[];
  categories: string[];
  allCategories: string[];
  pageIndex: number;
  pageCount: number;
}

const {
  entryIndex,
  entries,
  tags,
  categories,
  allCategories,
  pageIndex,
  pageCount,
} = Astro.props;
---

<BaseLayout title={entryIndex.data.title} description={entryIndex.data.description}>
  <PageHeader title={entryIndex.data.title} />
  <section class="section">
    <div class="flex container">
      <div class="row px-0 mx-0 w-full">
        <!-- blog posts -->
        <div class="col-12 lg:col-8 lg:p-0">
          {
            entries.map((entry) => (
              <div class="mb-4">
                <BlogCard entry={entry} />
              </div>
            ))
          }
          <Pagination
            collection="blog"
            pageIndex={pageIndex}
            pageCount={pageCount}
          />
        </div>
        <!-- sidebar -->
        <div
          class="hidden lg:col-4 lg:flex max-h-static_sidemenu sticky p-0 pl-4 top-[4rem]"
        >
          <BlogSidebar
            tags={tags}
            categories={categories}
            allCategories={allCategories}
          />
        </div>
      </div>
    </div>
  </section>
</BaseLayout>
