---
import { getCollection } from "astro:content"
import ProjectCard from "../../components/ProjectCard.astro"
import Layout from "../../layouts/Layout.astro"

const projects = await getCollection("projects")
---

<Layout title="Projects">
  <h1 class="text-4xl font-bold text-center my-10">Projects</h1>
  <div class="flex flex-wrap justify-around">
    {
      projects.map(
        ({
          data: { title, description, tags, heroImage, heroImageAlt },
          slug,
        }) => (
          <div class="my-5">
            <ProjectCard
              title={title}
              linkTo={`/project/${slug}`}
              description={description}
              tags={tags}
              image={heroImage}
              imageAlt={heroImageAlt}
            />
          </div>
        ),
      )
    }
  </div>
</Layout>