import ProjectItem from "@/components/project-item";
import { projects } from "@/lib/data";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "My Projects | Gabriel Kaszewski",
  description:
    "A showcase of my work, including web applications, games, and developer tools built with Rust, Next.js, and more.",
  alternates: {
    canonical: "https://gabrielkaszewski.dev/projects",
  },
  openGraph: {
    title: "My Projects | Gabriel Kaszewski",
    description:
      "A showcase of my work, including web applications, games, and developer tools built with Rust, Next.js, and more.",
    url: "https://gabrielkaszewski.dev/projects",
  },
  twitter: {
    card: "summary",
    title: "My Projects | Gabriel Kaszewski",
    description:
      "A showcase of my work, including web applications, games, and developer tools built with Rust, Next.js, and more.",
  },
};

const ProjectsPage = () => {
  return (
    <div className="flex w-full h-full min-h-screen flex-col items-center gap-4 pt-24">
      <h1 className="text-5xl font-bold text-center text-white">My Projects</h1>

      <div className="w-full flex flex-col items-center gap-16 mt-8">
        {projects.map((project) => (
          <ProjectItem key={project.id} project={project} />
        ))}
        {projects.length === 0 && (
          <p className="text-white text-center">
            No projects available. Working on it!
          </p>
        )}
      </div>
    </div>
  );
};

export default ProjectsPage;