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

interface Props {
    blogs: LastBlogsComponent;
}

function calculateSizeClasses(amount: number, length: number) {
    if (amount === 2 || length <= 2) {
        return "lg:w-[45%] w-full";
    }
    else {
        return "lg:w-[31%] w-full";
    }
}

const blogs = Astro.props.blogs;
const settings = await getSettings();
const lastBlogs = await getLastBlogs(blogs.amount);
const size = calculateSizeClasses(blogs.amount, lastBlogs.length);
---

{ settings.blog.enabled && (
<div
    id={`lastblogs-${blogs.id}`}
    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-row justify-between items-center w-full">
        <h2 class="text-4xl font-bold">{blogs.title}</h2>
        <div>
            <a 
                href={settings.blog.indexRouteTemplate}
                class="text-(--ptt) bg-(--ptc) hover:text-(--stt) hover:bg-(--stc) duration-200 py-3 px-4 rounded-full"
            >
                {blogs.readMoreButtonText}
            </a>
        </div>
    </div>

    <div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
        { lastBlogs.map((blog) => (
            <a href={getBlogRoute(settings.blog, blog)} class={`${size} flex flex-col gap-2`}>
                <Image
                    src={getImageUrl(blog.searchEngine.thumbnail.url)}
                    alt={blog.title}
                    class="flex rounded-2xl shadow-md w-full"
                    width={600}
                    height={315}
                />
                <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>
            </a>
        )) }
    </div>
</div>
) }