---
import Pagination from '@/components/page/pagination/Pagination.astro';
import PostSquare from '@/components/page/post/PostSquare.astro';
import { slicePosts } from '@/helpers/formatter';
import type { Category, Post } from '@/helpers/schema';
import BaseLayout from '@/layouts/BaseLayout.astro';
import options from '@/options';

interface Props {
  category: Category;
  posts: Post[];
  pageNum: number;
}

const { category, posts, pageNum } = Astro.props;
const { currentPosts, totalPage } = slicePosts(posts, pageNum, options.settings.pagination.category);
---

<BaseLayout title={category.name}>
  <div class="px-lg-2 px-xxl-5 py-3 py-md-4 py-xxl-5">
    <div class="container">
      <div class="mb-3 mb-lg-4">
        <h1>{category.name}</h1>
        <div class="text-muted mt-1">
          {category.description.split('\n').map((line) => (line !== '' ? <p>{line}</p> : ''))}
        </div>
      </div>
      <div class="row g-2 g-md-3 g-xxl-4 list-grouped">
        {currentPosts.map((post, index) => <PostSquare post={post} first={index === 0} />)}
      </div>
      <div class="mt-4 mt-lg-5">
        <Pagination current={pageNum} total={totalPage} rootPath={category.permalink} />
      </div>
    </div>
  </div>
</BaseLayout>