import ForgeUI from "@/components/ForgeUI";
import PageLayout from "@/components/PageLayout";
import { getAllForgeProjects } from "@/lib/git";
import { Hammer } from "lucide-react";

export default async function ForgePage() {
  const projects = await getAllForgeProjects();

  return (
    <PageLayout backLink="/" maxWidth="5xl">
      <header className="mb-20">
        <div className="flex items-center gap-3 mb-4">
          <Hammer className="text-orange-500 animate-pulse" size={24} />
          <h1 className="text-4xl font-bold tracking-tighter text-white uppercase font-mono">
            The Forge
          </h1>
        </div>
        <p className="text-neutral-500 max-w-2xl text-sm font-mono leading-relaxed">
          The Forge is my active development logs, providing a glimpse into my
          current projects and future potential releases.
        </p>
      </header>

      <div className="space-y-24">
        {projects.map((project) => (
          <ForgeUI key={project.id} project={project} />
        ))}
      </div>
    </PageLayout>
  );
}