---
import type { CollectionEntry } from "astro:content";

export type Props = {
    article: CollectionEntry<"articles">;
    headerElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
};

const {
    article: {
        id,
        data: { title, date },
    },
    headerElement = "h2",
} = Astro.props;
const H = headerElement;
---

<section class="article-preview">
    <span class="date">{date.toLocaleString()}</span>
    <H class="title"><a href={id}>{title}</a></H>
    <p class="content">aaa</p>
    <p>... <a class="mono-link" href="{{ .link }}">Read more</a></p>
</section>

<style>
    .article-preview {
        font-size: 0.95em;
        padding-inline: 0.5em;
        padding-block: 0.5em;

        & > p {
            font-size: 0.9em;
            line-height: 1.4;
            margin-inline-start: 0.3em;
            margin-block: 0;
        }

        & > .title {
            margin-block-start: 0;
            margin-block-end: 0.3em;
        }

        & > .date {
            font-size: small;
            margin-top: 0.25em;
            float: right;
            color: hsl(0, 0%, 25%);
        }

        & > .content {
            overflow: hidden;
            height: 3lh;
        }
    }

    html[data-theme="dark"] {
        & .article-preview {
            background-color: hsl(0, 0%, 3%);

            & > .date {
                color: hsl(0, 0%, 75%);
            }
        }
    }

    hr.article-preview-hr {
        border: none;
        border-top: 1.5px dashed currentColor;
    }
</style>