---
import { type CollectionEntry, getCollection } from "astro:content";

type Props = {
    entry: CollectionEntry<"blog"> | CollectionEntry<"projects">;
};

// Get the requested entry
const { entry } = Astro.props;
const { collection } = entry;
const { Content } = await entry.render();

// Get the next and prev entries (modulo to wrap index)
const items = (await getCollection(collection))
    .filter((post) => !post.data.draft)
    .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const index = items.findIndex((x) => x.slug === entry.slug);
const prev = items[(index + 1) % items.length];
const next = items[(index - 1 + items.length) % items.length];
---

<div>
    <article>
        <Content />
    </article>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <a
            href={`/${prev.collection}/${prev.slug}/`}
            class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 blend"
        >
            <div
                class="order-2 w-full h-full group-hover:text-black group-hover:dark:text-white blend"
            >
                <div class="flex flex-wrap gap-2">
                    <div class="text-sm uppercase">Prev</div>
                </div>
                <div class="font-semibold mt-3 text-black dark:text-white">
                    {prev.data.title}
                </div>
            </div>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke-width="2.5"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="order-1 stroke-current group-hover:stroke-black group-hover:dark:stroke-white rotate-180"
            >
                <line
                    x1="5"
                    y1="12"
                    x2="19"
                    y2="12"
                    class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
                ></line>
                <polyline
                    points="12 5 19 12 12 19"
                    class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
                ></polyline>
            </svg>
        </a>
        <a
            href={`/${next.collection}/${next.slug}/`}
            class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out"
        >
            <div
                class="w-full h-full text-right group-hover:text-black group-hover:dark:text-white blend"
            >
                <div class="text-sm uppercase">Next</div>
                <div class="font-semibold mt-3 text-black dark:text-white">
                    {next.data.title}
                </div>
            </div>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke-width="2.5"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white"
            >
                <line
                    x1="5"
                    y1="12"
                    x2="19"
                    y2="12"
                    class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
                ></line>
                <polyline
                    points="12 5 19 12 12 19"
                    class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
                ></polyline>
            </svg>
        </a>
    </div>
</div>
