---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import PageHead from '@/components/PageHead.astro'
import Search from '../../components/svelte/Search.svelte'
import Pagination from '../../components/svelte/ui/Pagination.svelte'
import Layout from '@/layouts/Layout.astro'
import { getAllPosts } from '@/lib/data-utils'
import type { PaginateFunction } from 'astro'
import { Icon } from 'astro-icon/components'

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

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

<Layout canonicalUrl={currentUrl}>
  <PageHead slot="head" title="Blog" />
  
  <Breadcrumbs
    items={[
      { label: 'Blog', href: '/blog', icon: 'lucide:archive' },
      { label: `Page ${page.currentPage}`, icon: 'lucide:folder-open' },
    ]}
  />
  <section class="max-screen mt-12 px-4 md:px-6">
    <div class="flex w-fit items-center gap-2 text-primary">
        <Icon class="h-4 w-4 text-secondary-foreground animate-pulse" name="lucide:brain" />
        <p class="shimmer word-spacing font-mono text-sm uppercase leading-none text-secondary-foreground">
          Quick Thoughts
        </p>
    </div>
    <h2
    id="skills-title"
    class="font-custom text-foreground text-4xl font-bold mt-2"
    >
      Blog
    </h2>
    <p class="text-muted-foreground text-md max-w-2xl mt-3">
      Welcome to my blog! Here, I share tutorials and insights on various topics. I hope you find the information helpful and engaging. If you have any questions or suggestions, feel free to reach out!
    </p>

    <div class="flex flex-col gap-y-8 my-12">
      <Search client:load searchList={searchList} initialPosts={page.data} />
    </div>

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