---
import BlogListItem from "~/components/widgets/BlogListItem.astro";
import Pagination from "~/components/widgets/Pagination.astro";

const { page } = Astro.props;
---

<section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
  <header>
    <h1 class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16">
      News and step-by-step guides about
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">AstroWind
      </span>
    </h1>
  </header>
  <ul>
    {
    page.data.map((post) => (
    <li class="mb-10 md:mb-16">
      <BlogListItem post={post} />
    </li>
    ))
    }
  </ul>

  {
  (page.url.prev || page.url.next) && (
  <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
  )
  }
</section>