<script lang="ts">
    export let post_url : string = '404';
    export let thumbnail_url : string = '/favicon.png';
    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
    export let title : string = '<title>';
    export let summary : string = '<summary>';
    export let creation_date : string = '<date>';

    const monthNames : string[] = ["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 class="thumbnail">
            <img src={thumbnail_url} alt={thumbnail_alt}/>
        </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;

        display: flex;
        flex-direction: row;
        gap: 15px;
    }

    .thumbnail > img {
        object-fit: cover;

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

        width: 150px;
        height: auto;
    }

    .content {
        flex-shrink: 2;

        display: flex;
        flex-direction: column;
        gap: 10px;
    }

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

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

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

</style>
