---
import type { CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";
import { formatDate, readingTime } from "@/lib/utils";

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

const { entry } = Astro.props;
const { collection, data, body } = entry;
const { title, summary, date } = data;

const demoUrl = collection === "projects" ? data.demoUrl : null;
const repoUrl = collection === "projects" ? data.repoUrl : null;
---

<div>
    <a
        href={`/${collection}/`}
        class="group w-fit p-1.5 gap-1.5 text-sm flex items-center border rounded 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="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>
        <div
            class="w-full font-departure group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out"
        >
            Back to {collection}
        </div>
    </a>
    <div
        class="flex flex-wrap text-sm font-departure uppercase mt-12 gap-3 opacity-75"
    >
        <div class="flex items-center gap-2">
            <Icon name="pixelarticons:calendar-2" class:list="size-5" />
            {formatDate(date)}
        </div>
        <div class="flex items-center gap-2">
            <Icon name="pixelarticons:book-open" class:list="size-5" />
            {readingTime(body ?? "")}
        </div>
    </div>
    <h1
        class="text-3xl font-semibold font-departure text-black dark:text-white mt-2"
    >
        {title}
    </h1>
    <div class="mt-1">
        {summary}
    </div>
    {
        (demoUrl || repoUrl) && (
            <div class="mt-4 flex flex-wrap gap-2">
                {demoUrl && (
                    <a
                        href={demoUrl}
                        target="_blank"
                        class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
                    >
                        <Icon name="pixelarticons:globe" class:list="size-4" />
                        <span class="text-current font-departure group-hover:text-black group-hover:dark:text-white blend">
                            See Demo
                        </span>
                    </a>
                )}
                {repoUrl && (
                    <a
                        href={repoUrl}
                        target="_blank"
                        class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
                    >
                        <Icon name="pixelarticons:link" class:list="size-4" />
                        <span class="text-current font-departure group-hover:text-black group-hover:dark:text-white blend">
                            See Repository
                        </span>
                    </a>
                )}
            </div>
        )
    }
</div>