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

export const metadata: Metadata = {
    title: 'Blog',
    description: 'Thoughts on software, deep learning, and research by Akshay Kolli.',
    openGraph: {
        title: 'Blog',
        description: 'Thoughts on software, deep learning, and research by Akshay Kolli.',
    },
};

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-[clamp(3rem,6vw,5rem)] font-medium leading-[0.94] tracking-[-0.08em] text-ink">
                            Notes on software, deep learning, and research.
                        </h1>
                        <p className="max-w-[34rem] text-[1rem] leading-8 text-muted">
                            A small archive of ideas, experiments, and things worth slowing down enough to explain.
                        </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 tracking-[0.18em] text-muted-strong">
                                    {format(new Date(post.date), 'MMMM d, yyyy')}
                                </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 tracking-[-0.05em] 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 tracking-[0.14em] 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 essay
                                    </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} published {posts.length === 1 ? 'essay' : 'essays'}. The archive stays selective.
                    </p>
                </section>
            </div>
        </div>
    );
}