import type { Metadata } from 'next';
import Link from 'next/link';
import { formatPostDate } from '@/lib/format';
import { getAllPosts } from '@/lib/mdx';

export const metadata: Metadata = {
    title: 'Blog',
    description: 'Essays and notes by Akshay Kolli on GPUs, ML hardware, deep learning, and research.',
    openGraph: {
        title: 'Blog',
        description: 'Essays and notes by Akshay Kolli on GPUs, ML hardware, deep learning, and research.',
    },
};

export default function BlogIndex() {
    const posts = getAllPosts();

    return (
        <div className="page-frame py-20 sm:py-24">
            <div className="mx-auto max-w-[72rem] space-y-10">
                <header className="space-y-4 border-b border-line pb-10">
                    <div className="space-y-4">
                        <p className="eyebrow">Writing</p>
                        <h1 className="max-w-[40rem] text-balance font-sans text-5xl font-medium leading-[0.96] text-ink sm:text-6xl lg:text-7xl">
                            Notes on GPUs, models, and the details underneath.
                        </h1>
                        <p className="max-w-[34rem] text-[1rem] leading-8 text-muted">
                            Hardware quirks, deep learning systems, and research problems
                            that needed more than the product page.
                        </p>
                    </div>
                </header>

                <div className="divide-y divide-line">
                    {posts.map((post) => (
                        <article key={post.slug} className="grid gap-3 py-6 md:grid-cols-[8rem_minmax(0,1fr)] md:gap-6">
                            <div className="pt-1">
                                <time dateTime={post.date} className="block font-mono text-[0.72rem] uppercase text-muted-strong">
                                    {formatPostDate(post.date)}
                                </time>
                            </div>

                            <div className="space-y-3">
                                <Link href={`/blog/${post.slug}`} className="block">
                                    <h2 className="max-w-[38rem] font-sans text-[1.8rem] font-medium leading-tight text-ink transition-colors hover:text-accent sm:text-[2.1rem]">
                                        {post.title}
                                    </h2>
                                </Link>

                                <p className="max-w-[34rem] text-[0.98rem] leading-7 text-muted">
                                    {post.description}
                                </p>

                                <div className="flex flex-wrap items-center gap-x-4 gap-y-2 pt-1 text-[0.76rem] font-mono uppercase text-muted-strong">
                                    {post.tags?.map((tag) => (
                                        <span key={tag}>
                                            {tag}
                                        </span>
                                    ))}
                                    <Link href={`/blog/${post.slug}`} className="text-ink transition-colors hover:text-accent">
                                        Read
                                    </Link>
                                </div>
                            </div>
                        </article>
                    ))}
                </div>

                <section className="grid gap-4 border-t border-line pt-6 md:grid-cols-[8rem_minmax(0,1fr)]">
                    <p className="eyebrow md:pt-1">Archive</p>
                    <p className="max-w-[34rem] text-[0.96rem] leading-7 text-muted">
                        {posts.length} {posts.length === 1 ? 'essay' : 'essays'} published so far. I publish when I have a real question to chase down.
                    </p>
                </section>
            </div>
        </div>
    );
}