---
import { getAllPaginatedBlogs } from '@/content/blogs/blogs';
import { getSettings } from '@/content/settings/settings';
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { getImageSize, getImageUrl } from '@/lib/images';
import { markdownToHtml } from '@/lib/markdown';
import { getBlogRoute } from '@/lib/routing';
import { Image } from 'astro:assets';

interface Props {
    page: BlogIndex;
}

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

const settings = await getSettings();
const blogs = await getAllPaginatedBlogs(settings, pageNumber);
---

<div
    id={`blogindex-${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.blog.title }</h1>
        { settings.blog.subtext !== null && (
            <div set:html={markdownToHtml(settings.blog.subtext)}></div>
        ) }
    </div>

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

            return (
                <a href={getBlogRoute(settings.blog, blog)} class={`flex flex-col gap-2`}>
                    <Image
                        src={getImageUrl(blog.searchEngine.thumbnail.url)}
                        alt={blog.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]">{blog.title}</h4>
                        <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>
                </a>
            )
            
        }) }
    </div>
</div>