---
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { getImageUrl } from '@/lib/images';
import { markdownToHtml } from '@/lib/markdown';
import { Image } from 'astro:assets';

interface Props {
    blog: BlogPost;
}

const { blog } = Astro.props;
---

<div
    id={`blog-${blog.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-[67%] w-full">
        <div class="flex flex-col gap-3">
            <h1 class="font-semibold text-5xl">{blog.title}</h1>
            <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
                <CalendarIcon width={20} height={20} />
                <div>{blog.date}</div>
            </div>
        </div>

        <div>
            <Image
                src={getImageUrl(blog.searchEngine.thumbnail.url)}
                width="1200"
                height="630"
                alt={blog.title}
                class="rounded-2xl shadow-md object-cover"
            />
        </div>

        <div set:html={markdownToHtml(blog.content)}></div>
    </div>
</div>