---
import type { CollectionEntry } from "astro:content";
import { l } from "../util/util";
import { astroI18n } from "astro-i18n";
import { Image } from "astro:assets";
import TagComponent from "./TagComponent.astro";
import P from "./P.astro";
import Card from "@components/Card.svelte";

interface Props {
    post: CollectionEntry<"announcements">;
}

const {
    post,
    slim,
}: {
    post: CollectionEntry<"announcements">;
    slim: boolean;
} = Astro.props as Props;

const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
---

<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1 backdrop-blur-xl bg-transparent" : ""}`} hoverEffect={false}>
    <div class={`flex flex-row ${slim ? "" : "p-4"}`}>
        {
            post.data.image != null ? (
                <a href={postUrl}>
                    <div class="flex-shrink-0 pr-2">
                        <Image
                            transition:name={post.data.title + "-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>
                </a>
            ) : null
        }
        <div>
            <a href={postUrl} class="flex flex-col items-start">
                <h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
                <P class="text-gray-500"
                    >{
                        Intl.DateTimeFormat(astroI18n.locale, {
                            day: "numeric",
                            month: "long",
                            year: "numeric",
                        }).format(post.data.created)
                    }</P
                >
                <P>{post.data.description}</P>
            </a>
            <div class="mt-1" transition:name={post.data.title + "-tags"}>
                {post.data.tags.map((tag) => <TagComponent tag={tag} />)}
            </div>
        </div>
    </div>
</Card>