import ProjectCard from "../components/ProjectCard.tsx";

interface Project {
  id: string;
  name: string;
  description: string;
  link: string;
}

export default function ProjectsPage() {
  const projects: Project[] = [
    {
      id: "bluesky-pds-manager",
      name: "BlueSky PDS Manager",
      description:
        "A web-based BlueSky PDS Manager. Manage your invite codes and users with a simple web UI.",
      link: "https://pdsman.atri.dad",
    },
    {
      id: "pollo",
      name: "Pollo",
      description: "A dead-simple real-time voting tool.",
      link: "https://git.atri.dad/atridad/pollo",
    },
    {
      id: "goth-stack",
      name: "GOTH Stack",
      description:
        "🚀 A Web Application Template Powered by HTMX + Go + Tailwind 🚀",
      link: "https://git.atri.dad/atridad/goth.stack",
    },
    {
      id: "himbot",
      name: "Himbot",
      description:
        "A discord bot written in Go. Loosly named after my username online (HimbothySwaggins).",
      link: "https://git.atri.dad/atridad/himbot",
    },
    {
      id: "loadr",
      name: "loadr",
      description:
        "A lightweight REST load testing tool with robust support for different verbs, token auth, and performance reports.",
      link: "https://git.atri.dad/atridad/loadr",
    },
  ];

  return (
    <div class="min-h-screen p-4 sm:p-8">
      <h1 class="text-3xl sm:text-4xl font-bold text-secondary mb-6 sm:mb-8 text-center">
        Projects
      </h1>
      <div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
        {projects.map((project) => (
          <ProjectCard key={project.id} project={project} />
        ))}
      </div>
    </div>
  );
}