<script>
    export let post_url = '404';
    export let thumbnail_url = '/favicon.png';
    export let thumbnail_alt = 'Picture describting the deprived devs logo';
    export let title = '<title>';
    export let summary = '<summary>';
    export let creation_date = 1710006969;

    const monthNames = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];

    $: human_creation_date = new Date(+creation_date * 1000);
</script>

<div class="news-card">
    <a href=/post/{post_url} >
        <div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});">
        </div>
        <div class="content">
            <h3 id="title">{title}</h3>
            <p id="summary-text">{summary}</p>
            <p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
        </div>
    </a>
</div>

<style>
    a {
        text-decoration: none;
    }

    .news-card {
        display: inline-flex;
        flex-direction: column;
        gap: 15px;
    }

    .news-card h3 {
        color: var(--text1);
        margin: 0px;
        font-size: 22px;
    }

    .thumbnail {
        aspect-ratio: 16 / 9;
        background-size: cover;
        background-position: center;

        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .content {
        display: flex;
        flex-direction: column;

        gap: 10px;
    }

    #title {
        margin: 0;
        text-decoration: none;
        color: var(--text1);
    }

    #summary-text {
        margin: 0;
        text-decoration: none;
        color: var(--text2);
    }

    #date {
        margin: 0;
        text-decoration: none;
        color: var(--text4);
    }
</style>
