---
import type { CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";
export interface Props {
    post: CollectionEntry<"posts">;
}

const { post } = Astro.props;
const { title, description: blurb, pubDate } = post.data;
const { slug } = post;
---

<div
    class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
>
    <div class="card-body p-3 break-words">
        <h2
            class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2"
        >
            {title}
        </h2>

        <p class="text-center text-base-100 break-words mb-3 text-base">
            {blurb || "No description available."}
        </p>

        <div
            class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2"
        >
            <Icon name="mdi:clock" class="text-xl" />
            <span>
                {
                    new Date(pubDate).toLocaleDateString("en-us", {
                        month: "long",
                        day: "numeric",
                        year: "numeric",
                    })
                }
            </span>
        </div>

        {
            post.data.tags && post.data.tags.length > 0 && (
                <div class="flex gap-2 flex-wrap mb-2 justify-center">
                    {post.data.tags.map((tag: string) => (
                        <div class="badge badge-primary">
                            <Icon name="mdi:tag" class="text-lg" />
                            {tag}
                        </div>
                    ))}
                </div>
            )
        }

        <div class="card-actions justify-end mt-2">
            <a
                href={`/post/${slug}`}
                class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
                aria-label={`Read more about ${title}`}
            >
                <Icon name="mdi:arrow-right" class="text-lg" />
            </a>
        </div>
    </div>
</div>