---
import { type CollectionEntry, getCollection } from "astro:content";
import { Icon } from "astro-icon/components";

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

// Get the requested entry
const { entry } = Astro.props;
const { collection } = entry;

// 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.id === entry.id);
const prev = items[(index + 1) % items.length];
const next = items[(index - 1 + items.length) % items.length];
---

<div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <a
            href={`/${prev.collection}/${prev.id}/`}
            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 font-departure uppercase">Prev</div>
                </div>
                <div class="font-semibold mt-3 text-black dark:text-white">
                    {prev.data.title}
                </div>
            </div>
            <div class="relative overflow-hidden w-4 h-4">
                <Icon
                    name="pixelarticons:arrow-left"
                    class:list="absolute left-0 inset-y-0 text-lg origin-right
                        scale-x-0 group-hover:scale-x-100
                        transition-all duration-300 ease-in-out"
                />
                <Icon
                    name="pixelarticons:chevron-left"
                    class:list="absolute left-0 inset-y-0 text-lg
                        group-hover:-translate-x-4
                        transition-all duration-300 ease-in-out"
                />
            </div>
        </a>
        <a
            href={`/${next.collection}/${next.id}/`}
            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 font-departure uppercase">Next</div>
                <div class="font-semibold mt-3 text-black dark:text-white">
                    {next.data.title}
                </div>
            </div>
            <div class="relative overflow-hidden w-4 h-4">
                <Icon
                    name="pixelarticons:arrow-right"
                    class:list="absolute right-0 inset-y-0 text-lg origin-left
                        scale-x-0 group-hover:scale-x-100
                        transition-all duration-300 ease-in-out"
                />
                <Icon
                    name="pixelarticons:chevron-right"
                    class:list="absolute right-0 inset-y-0 text-lg
                        group-hover:translate-x-4
                        transition-all duration-300 ease-in-out"
                />
            </div>
        </a>
    </div>
</div>
