import Head from "next/head";

import { PageShell } from "~/components/PageShell";
import { PostList } from "~/components/PostList";
import { api } from "~/utils/api";

const postSkeletonKeys = [
  "posts-loading-1",
  "posts-loading-2",
  "posts-loading-3",
  "posts-loading-4",
  "posts-loading-5",
  "posts-loading-6",
] as const;

export default function PostsPage() {
  const postsQuery = api.post.list.useQuery({ limit: 24 });

  return (
    <>
      <Head>
        <title>Posts | Web Boilerplate</title>
        <meta content="Public post index for the generic Better Auth boilerplate." name="description" />
      </Head>

      <PageShell
        eyebrow="Public Route"
        intro="This page is intentionally unprotected. It should still be useful with an empty database and predictable after new posts are created."
        title="Browse the full post index"
      >
        {postsQuery.error ? (
          <div className="rounded-[24px] border border-[#6f4348] bg-[#231115] px-5 py-4 text-[#ffccd2] text-sm">
            Failed to load posts: {postsQuery.error.message}
          </div>
        ) : null}

        {postsQuery.isPending ? (
          <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
            {postSkeletonKeys.map((key) => (
              <div className="h-64 animate-pulse rounded-[26px] border border-white/10 bg-white/[0.05]" key={key} />
            ))}
          </div>
        ) : null}

        {postsQuery.data ? (
          <PostList
            emptyText="This route is live, but the database is still empty. Create the first post from the protected dashboard."
            emptyTitle="Nothing to show yet"
            posts={postsQuery.data}
          />
        ) : null}
      </PageShell>
    </>
  );
}
