---
import { getSettings } from "@/content/settings/settings";
import { getAllPaginatedProjects } from "@/content/projects/projects";
import { markdownToHtml } from "@/lib/markdown";
import { Image } from "astro:assets";
import { getProjectRoute } from "@/lib/routing";
import CalendarIcon from "@/icons/CalendarIcon.astro";
import { getImageSize, getImageUrl } from "@/lib/images";

interface Props {
    page: ProjectIndex;
}

const { page } = Astro.props;
const { pageNumber } = page;

const settings = await getSettings();
const projects = await getAllPaginatedProjects(settings, pageNumber);
---

<div
    id={`projectindex-${pageNumber}`}
    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
>
    <div class="flex flex-col justify-center items-center gap-2.5">
        <h1 class="text-5xl font-bold">{ settings.project.title }</h1>
        { settings.project.subtext !== null && (
            <div set:html={markdownToHtml(settings.project.subtext)}></div>
        ) }
    </div>

    <div class="grid grid-cols-2 gap-6">
        { projects.map((project) => {
            const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.searchEngine.thumbnail.height, 0.5);

            return (
                <a href={getProjectRoute(settings.project, project)} class={`flex flex-col gap-2`}>
                    <Image
                        src={getImageUrl(project.searchEngine.thumbnail.url)}
                        alt={project.title}
                        class="flex rounded-2xl shadow-md w-full"
                        width={imageSize.width}
                        height={imageSize.height}
                    />
                    <div class="flex flex-col gap-1">
                        <h4 class="font-semibold text-[28px]">{project.title}</h4>
                        <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
                            <CalendarIcon width={20} height={20} />
                            <div>{project.date}</div>
                        </div>
                    </div>
                </a>
            )
        }) }
    </div>
</div>