---
import { getCollection, render } from "astro:content";
import PageLayout from "@/layouts/PageLayout.astro";
import TopLayout from "@/layouts/TopLayout.astro";
import BottomLayout from "@/layouts/BottomLayout.astro";
import { WORK } from "@/consts";

const collection = await getCollection("work");

collection.sort(
    (a, b) =>
        new Date(b.data.dateStart).getTime() -
        new Date(a.data.dateStart).getTime(),
);

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

function formatWorkDate(input: Date | string) {
    if (typeof input === "string") return input;

    const month = input.toLocaleDateString("en-US", {
        month: "short",
    });

    const year = new Date(input).getFullYear();
    return `${month} ${year}`;
}
---

<PageLayout title={WORK.TITLE} description={WORK.DESCRIPTION}>
    <TopLayout>
        <div class="animate page-heading">
            {WORK.TITLE}
        </div>
    </TopLayout>
    <BottomLayout>
        <ul>
            {
                work.map((entry) => (
                    <li class="animate border-b border-black/10 dark:border-white/25 mt-4 py-8 first-of-type:mt-0 first-of-type:pt-0 last-of-type:border-none">
                        <div class="font-departure text-sm uppercase mb-4">
                            {formatWorkDate(entry.data.dateStart)} -{" "}
                            {formatWorkDate(entry.data.dateEnd)}
                        </div>
                        <div class="font-departure text-black dark:text-white font-semibold">
                            {entry.data.company}
                        </div>
                        <div class="font-departure text-sm font-semibold">
                            {entry.data.role}
                        </div>
                        <article class="prose dark:prose-invert">
                            <entry.Content />
                        </article>
                    </li>
                ))
            }
        </ul>
    </BottomLayout>
</PageLayout>
