---
import { getCollection } from "astro:content";
import PageLayout from "@layouts/PageLayout.astro";
import Container from "@components/Container.astro";
import { dateRange } from "@lib/utils";
import { WORK } from "@consts";

const collection = (await getCollection("work"))
  .sort((a, b) => new Date(b.data.dateStart).valueOf() - new Date(a.data.dateStart).valueOf());

const work = await Promise.all(
  collection.map(async (item) => {
    const { Content } = await item.render();
    return { ...item, Content };
  })
);
---

<PageLayout title={WORK.TITLE} description={WORK.DESCRIPTION}>
  <Container>
    <div class="space-y-10">
      <div class="animate font-semibold text-black dark:text-white text-4xl font-serif">
        Work
      </div>
      <ul class="flex flex-col space-y-4">
        { 
          work.map(entry => (
            <li class="animate">
              <div class="text-sm opacity-75">
                {dateRange(entry.data.dateStart, entry.data.dateEnd)}
              </div>
              <div class="font-semibold text-black dark:text-white">
                {entry.data.company}
              </div>
              <div class="text-sm opacity-75">
                {entry.data.role}
              </div>
              <article>
                <entry.Content />
              </article>
            </li>
          ))
        }
      </ul>
<!-- 
      <ul class="animate flex flex-col gap-4">

      </ul> -->
    </div>
  </Container>
</PageLayout>
