HTMLify

import { JetBrainsMono } from '@/fonts';
import Link from 'next/link';
import { cn } from '@/lib/utils';
import { getblogPost } from '@/lib/actions/blogs';
import { BlogPost } from '@/.generated/client';
import { ViewCounter } from '@/components/blog/view-counter';
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
import { AdminControls } from '@/components/blog/admin-controls';

export default async function BlogIndex() {
    const session = await auth.api.getSession({
        headers: await headers(),
    });
    const allPosts = await getblogPost();

    return (
        <div className={cn("min-h-screen p-8 md:p-20 text-blog-fg", JetBrainsMono.className)}>
            <div className="max-w-4xl mx-auto">
                <header className="mb-16">
                    <h1 className="text-5xl font-bold mb-4 text-blog-orange">Blog</h1>
                    <p className="text-xl text-blog-fg opacity-80">
                        Thoughts, ideas, and code snippets from the void.
                    </p>
                </header>

                {!allPosts || allPosts.length === 0 ? (
                    <p className="text-lg text-blog-fg opacity-80">
                        No posts found.
                    </p>
                ) :
                    <div className="grid gap-8">
                        <BlogCards posts={allPosts} session={session} />
                    </div>
                }

            </div>
        </div>
    );
}

function BlogCards({ posts, session }: { posts: BlogPost[], session: any }) {
    return (
        <>
            {posts.map((post) =>
                <Link
                    key={post.id}
                    href={`/blog/${post.slug}`}
                    className="block group border border-blog-inactive-border hover:border-blog-orange rounded-lg p-6 bg-blog-bg transition-colors duration-200"
                >
                    <h2 className="text-2xl font-bold mb-2 group-hover:text-blog-orange transition-colors text-blog-white flex justify-between items-start">
                        <span className="flex items-center gap-2">
                            {post.title}
                            {!post.published && (
                                <span className="text-xs bg-blog-selection-bg text-blog-cyan px-2 py-0.5 rounded font-normal font-mono">
                                    Draft
                                </span>
                            )}
                        </span>
                        {session && <AdminControls slug={post.slug} />}
                    </h2>
                    <div className="text-sm mb-4 text-blog-black font-mono flex items-center gap-4">
                        {new Date(post.created_at).toLocaleDateString()}
                        <ViewCounter slug={post.slug} initialViews={post.views} trackView={false} />
                    </div>
                    <p className="text-blog-fg text-lg leading-relaxed">
                        {post.excerpt}
                    </p>
                </Link>
            )}
        </>
    );
}