---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import PageHead from '@/components/PageHead.astro'
import Search from '@/components/react/search'
import PaginationComponent from '@/components/ui/pagination'
import Layout from '@/layouts/Layout.astro'
import { getAllPosts } from '@/lib/data-utils'
import type { PaginateFunction } from 'astro'

export async function getStaticPaths({
  paginate,
}: {
  paginate: PaginateFunction
}) {
  const allPosts = await getAllPosts()
  return paginate(allPosts, { pageSize: 5 })
}

const { page } = Astro.props
const searchList = await getAllPosts()
---

<Layout>
  <PageHead slot="head" title="Blog" />
  <Breadcrumbs
    items={[
      { label: 'Blog', href: '/blog', icon: 'lucide:archive' },
      { label: `Page ${page.currentPage}`, icon: 'lucide:folder-open' },
    ]}
  />

  <div class="flex min-h-[calc(100vh-18rem)] flex-col gap-y-8">
    <Search client:load searchList={searchList} initialPosts={page.data} />
  </div>

  <PaginationComponent
    currentPage={page.currentPage}
    totalPages={page.lastPage}
    baseUrl="/blog/"
    client:load
  />
</Layout>