---
import type { Project } from "@/types/types"
import type { NavLink } from "@/utils/linking"
import ProjectCard from "./ProjectCard.astro"

interface Props {
  projects: ReadonlyArray<Project>
}

const { projects } = Astro.props

const baseUrl: NavLink = "/projects"
---

<div class="flex flex-wrap justify-around">
  {
    projects.map(
      ({ data: { title, description, tags, heroImage, heroImageAlt }, id }) => (
        <div class="my-5 px-2">
          <ProjectCard
            title={title}
            linkTo={`${baseUrl}/${id}`}
            description={description}
            tags={tags}
            image={heroImage}
            imageAlt={heroImageAlt}
          />
        </div>
      ),
    )
  }
</div>