---
import Layout from "../layouts/Layout.astro";
import ProjectCard from "../components/ProjectCard.astro";
import { projects } from "../config/data";
---

<Layout>
  <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 project={project} />
      ))}
    </div>
    
    {projects.length === 0 && (
      <p class="text-center text-gray-500 mt-12">No projects available yet. Check back soon!</p>
    )}
  </div>
</Layout>