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

interface Props {
  projects: ReadonlyArray<Project>
}

const { projects } = Astro.props

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

<div class="flex flex-wrap justify-around">
  {
    projects
      .toSorted((a, b) =>
        dayjs(a.data.updatedAt).isBefore(dayjs(b.data.updatedAt)) ? 1 : -1,
      )
      .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>