import { ConditionalNull } from "@/components/utility/Conditional";
import { MainLayout } from "@/layout/MainLayout/MainLayout";
import Link from "next/link";
import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import styles from "./style.module.css";

export default async function Home({
  searchParams
}: {
  searchParams: { 
    page: string
  }
}) {
  const curPage = parseInt(searchParams?.page) || 1;

  const blogs = await fetch(`https://blog.abtmtr.link/api/collections/gallery/posts?page=${curPage}`, { next: { revalidate: 3600 } }).then(x=>x.json());
  return (
    <MainLayout currentPage="/gallery/" title="Gallery" subtitle="via img.abtmtr.link">
      <img className="headerImage" src="/headers/gallery.png" alt="GALLERY"></img>
      <div className={styles.ImageContainerGrid}>
      {blogs.data.posts.map((post:{
        title: string,
        body: string,
        created: string,
        updated: string,
        tags: string[],
        views: number,
        slug: string,
        images: string[]
      }) => (
        <Link href={`/gallery/${post.slug}`} className={styles.ImageContainerLink}>
          <div style={{
            backgroundImage: `linear-gradient(0deg, #000c 0%, #000c 50%, #0004 100%), url(${post.images?.[0]})`,
          }} className={styles.ImageContainer}>
            <h2>{post.title}</h2>
            <p>Posted {new Date(post.created).toLocaleDateString()}</p>
          </div>
        </Link>
      ))}
      </div>
      <div className="navigation">
        <ConditionalNull condition={curPage > 1}>
          <Link href={`?page=${curPage - 1}`}>Previous</Link>
        </ConditionalNull>
        <ConditionalNull condition={curPage * 10 < blogs.data.total_posts}>
          <Link href={`?page=${curPage + 1}`}>Next</Link>
        </ConditionalNull>
      </div>
    </MainLayout>
  )
}
