---
import {CollectionEntry} from "astro:content"
import {l} from "../util/util";
import {astroI18n} from "astro-i18n";
import {Image} from "astro:assets";
import TagComponent from "./TagComponent.astro";

interface Props {
    post: CollectionEntry<'announcements'>
}

const { post } = Astro.props as Props;
---

<a href={l(`/announcements/${post.slug.split("/").slice(1).join("/")}`)}>
    <div class="p-4 flex flex-row">
        {post.data.image != null ? (
            <div class="flex-shrink-0 pr-2">
                <Image src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
            </div>
        ) : null}
        <div>
            <h2 class="text-2xl font-bold">{post.data.title}</h2>
            <div class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
                day: "numeric",
                month: "long",
                year: "numeric"
            }).format(post.data.created)}</div>
            <div>{post.data.description}</div>
            <div>
                {post.data.tags.map((tag) => (
                        <TagComponent tag={tag} />
                ))}
            </div>
        </div>
    </div>
</a>