---
import { marked } from "marked";
import formatDate from "@/utils/format-date";

const props = Astro.props;
const content = marked.parse(props.content);
---

<article class="rounded-md border px-4 py-2">
    <header class="mb-2">
        <section class="flex items-center justify-between text-sm">
            <span class="font-light">
                {formatDate(new Date(props.published))}{" "}
            </span>
            <span class="text-sm font-thin">
                {new Date(props.published).toLocaleTimeString()}
            </span>
        </section>
        <section class="mt-1">
            {
                props &&
                    props.expand.tags &&
                    props?.expand.tags.map(
                        (tag: any) =>
                            tag && <span class="text-sm">#{tag.name} </span>,
                    )
            }
        </section>
    </header>
    <main set:html={content} />
</article>