---
import CalendarIcon from "@/icons/CalendarIcon.astro";
import { getImageSize } from "@/lib/images";
import { markdownToHtml } from "@/lib/markdown";
import { getTypographyClasses } from "@/styles/markdownClasses";
import { Image } from "astro:assets";

interface Props {
    project: ProjectPost;
}

const { project } = Astro.props;

const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.searchEngine.thumbnail.height, 1);
---

<div
    id={`project-${project.id}`}
    class="flex flex-row justify-center items-center"
>
    <div class="flex lg:flex-col flex-col py-12 px-12 gap-y-8 gap-x-18 lg:max-w-[50%]">
        <div class="flex flex-col gap-3">
            <h1 class="font-semibold text-5xl">{project.title}</h1>
            <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>

        <div class="aspect-1200/630 w-full max-w-full overflow-hidden">
            <div class="w-full h-full rounded-2xl shadow-md object-cover">
                <Image
                    src={project.searchEngine.thumbnail.url}
                    width={imageSize.width}
                    height={imageSize.height}
                    alt={project.title}
                    class="rounded-2xl"
                />
            </div>
        </div>

        <div set:html={markdownToHtml(project.content)} class={`${getTypographyClasses()} min-w-full`}></div>
    </div>
</div>