import { Navigation } from "@/components/navigation";
import { ProjectCard } from "@/components/project-card";
import { getProjects } from "@/lib/content";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Projects",
  description: "A collection of my projects and side work",
};

export default function ProjectsPage() {
  const projects = getProjects();

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="container mx-auto px-6 py-16 max-w-6xl">
        <div className="mb-16">
          <h1 className="text-4xl font-bold text-foreground mb-4">Projects</h1>
          <p className="text-lg text-muted-foreground">
            A collection of projects I've built and contributed to
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {projects.map((project) => (
            <ProjectCard key={project.slug} project={project} />
          ))}
        </div>
      </main>
    </div>
  );
}