mainasara.dev/src/app/thoughts/[slug]/page.tsx

import { notFound } from 'next/navigation';
import Link from 'next/link';
import { loadThoughts } from '@/utils/mdxLoader';
import { formatReadingTime } from '@/utils/readingTime';

interface ThoughtPageProps {
  params: {
    slug: string;
  };
}

import fs from 'fs';

export async function generateStaticParams() {
  const thoughtsDirectory = process.cwd() + '/src/content/thoughts';
  
  try {
    const filenames = fs.readdirSync(thoughtsDirectory);
    return filenames.map((filename: string) => ({
      slug: filename.replace(/\.mdx$/, ''),
    }));
  } catch {
    return [];
  }
}

export async function generateMetadata({ params }: ThoughtPageProps) {
  const thought = await getThoughtBySlug(params.slug);
  
  if (!thought) {
    return {
      title: 'Thought Not Found',
    };
  }

  return {
    title: `${thought.title} | Mainasara Tsowa`,
    description: thought.excerpt,
    openGraph: {
      title: `${thought.title} | Mainasara Tsowa`,
      description: thought.excerpt,
      url: `https://mainasara.dev/thoughts/${params.slug}`,
    },
    twitter: {
      title: `${thought.title} | Mainasara Tsowa`,
      description: thought.excerpt,
    },
  };
}

async function getThoughtBySlug(slug: string) {
  const thoughts = await loadThoughts();
  return thoughts.find(thought => thought.id === slug.replace(/[^a-zA-Z0-9]/g, '-'));
}

export default async function ThoughtPage({ params }: ThoughtPageProps) {
  const thought = await getThoughtBySlug(params.slug);
  
  if (!thought) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-teal-50 via-green-50 to-blue-50 font-mono">
      <div className="max-w-4xl mx-auto px-6 py-12">
        <header className="text-center mb-16">
          <div className="mb-8">
            <div className="w-32 h-32 mx-auto bg-black rounded-full flex items-center justify-center border-4 border-teal-300">
              <div className="text-4xl font-bold text-teal-300">🌸</div>
            </div>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
            Thoughts
          </h1>
          <p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
            Reflections on technology and life
          </p>
        </header>

        <nav className="mb-16">
          <div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
              <li>
                <Link
                  href="/"
                  className="text-black font-bold hover:bg-green-200 px-4 py-2 transition-colors border-2 border-black hover:border-green-400"
                >
                  Home
                </Link>
              </li>
              <li>
                <Link
                  href="/digital-art"
                  className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400"
                >
                  Digital Art
                </Link>
              </li>
              <li>
                <Link
                  href="/stories"
                  className="text-black font-bold hover:bg-yellow-200 px-4 py-2 transition-colors border-2 border-black hover:border-yellow-400"
                >
                  Stories
                </Link>
              </li>
              <li>
                <Link
                  href="/thoughts"
                  className="border-teal-200 bg-teal-300 px-4 py-2 border-2 text-black"
                >
                  All Thoughts
                </Link>
              </li>
            </ul>
          </div>
        </nav>

        <main>
          <article className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
            <div className="mb-8">
              <h1 className="text-3xl md:text-4xl font-bold text-gray-900 uppercase mb-4">
                {thought.title}
              </h1>
              
              <div className="flex gap-4 text-sm mb-6">
                <span className="bg-teal-200 text-black px-3 py-1 border-2 border-black font-bold">
                  {thought.category}
                </span>
                <span className="bg-teal-200 text-black px-3 py-1 border-2 border-black font-bold">
                  {formatReadingTime(thought.readTime)} read
                </span>
                <span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
                  {new Date(thought.createdAt).toLocaleDateString('en-US', { 
                    year: 'numeric', 
                    month: 'long', 
                    day: 'numeric' 
                  })}
                </span>
              </div>
            </div>

            <div className="prose prose-lg max-w-none">
              <div className="text-gray-800 leading-relaxed whitespace-pre-line">
                {thought.content}
              </div>
            </div>
          </article>
        </main>

        <footer className="mt-20 text-center">
          <div className="bg-black text-white p-4 font-bold">
            <p className="text-sm uppercase">Built with brutalist pastels</p>
          </div>
        </footer>
      </div>
    </div>
  );
}