---
import FullLayoutV1 from '../layout/FullLayoutV1.astro'
import { listBlogs, type ListBlogItemType } from '../lib/apis/legacy/blog'
import BlogCard from '../components/BlogCard.astro'
import BlogHeaderImage from '../assets/blogs-header.webp'
import { Image } from 'astro:assets'

export const prerender = false

const _page = parseInt(Astro.url.searchParams.get('page') || '1')
const page = isNaN(_page) ? 1 : Math.max(1, _page)

let blogs: ListBlogItemType[] = []

try {
  blogs = await listBlogs({ page, limit: 100 })
} catch (e) {
  console.error(e)
  return Astro.redirect('/500')
}
---

<FullLayoutV1 withGap title="博客列表 - 小帕的小窝">
  <!-- <div class="__dev__caution">
    <h1>仍在开发中，界面会崩坏</h1>
  </div> -->
  <div class="container">
    <section class="blogs-header">
      <Image
        class="image"
        src={BlogHeaderImage}
        alt="博客列表的头图，一个悬挂在空中的 LCD1602，上面写着一些示例文本"
        width={960}
        height={540}
        densities={[1.5, 2]}
      />
      <div class="description">
        <h1>博客列表</h1>
        <h2>这里是 passthem 和他朋友们的文章</h2>
      </div>
    </section>
    <main>
      <ul>
        {
          blogs.map((blog) => (
            <BlogCard
              title={blog.title}
              link={`/blogs/${blog.id}`}
              featureImage={blog.featured_image?.image_url}
              author={{
                name: blog.author.nickname,
                avatar: blog.author.avatar.image_url,
              }}
              createdAt={blog.created_at}
              updatedAt={blog.updated_at}
            />
          ))
        }
      </ul>
    </main>
  </div>
</FullLayoutV1>

<style>
  .__dev__caution {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;

    & > h1 {
      font-size: 72px;
      font-weight: 800;
    }
  }

  .container {
    max-inline-size: 960px;
    margin-inline: auto;
  }

  .blogs-header {
    margin-block-end: 3rem;
    position: relative;
    aspect-ratio: 16 / 9;

    @media (width < 768px) and (width >= 540px) {
      aspect-ratio: 2.5 / 1;
    }

    @media (width >= 768px) {
      aspect-ratio: 4 / 1;
    }

    & > .image {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      filter: saturate(0.6);
      object-fit: cover;
      user-select: none;
    }

    & > .description {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      gap: 0.5rem;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #00000099;
      color: white;

      & > h1 {
        font-size: 2.5rem;
        font-weight: 600;
      }

      & > h2 {
        font-size: 1rem;
        font-weight: 300;
      }

      & > h1,
      & > h2 {
        text-shadow: 0 0 10px black;
      }
    }
  }

  @media (width >= 768px) {
    main {
      margin-inline: auto;
      max-width: 840px;
    }
  }
</style>