<script lang="ts">
    import MediaQuery from 'svelte-media-queries';
    import NewsCard from '$lib/posts/NewsCard.svelte';
    import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
    import Button from '$lib/IO/Button.svelte';
    import { ButtonType } from '$lib/IO/ButtonType.ts';

    export let data; // <- contains post data

    $: most_recent_post = data.summaries[0];

    const mobileThreshold : string = '1000px';
    const post_show_count : number = 3;
    let mobile : boolean;
</script>

<!-- Detect mobile -->
<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />

<div class="main-title">
    <h1>The Deprived Devs</h1>
</div>


<section id="news-section">
    <header id="news-header">
        <h1>Recent News</h1>
    </header>
    <div class="news-container">
        <!-- The newest blog post being showcased -->
        <ShowcaseNewsCard post_url={most_recent_post.url} title={most_recent_post.title} summary={most_recent_post.summary} creation_date={most_recent_post.creation_date} />

        <div class="news-list">
            {#each data.summaries.slice(1, post_show_count) as summary}
                <NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
            {/each}
        </div>
    </div>
    <footer id="news-footer">
        <div class="dummy"/>
        <div id="more-posts">
            <Button type={ButtonType.Primary}>
                <a slot="content" href="/post">
                    <span>More News</span>
                </a>
            </Button>
        </div>
    </footer>
</section>

<style>
    #news-section {
        display: flex;
        flex-direction: column;
        align-items: center;

        transition-duration: 500ms;
        transition-property: width;
        width: 80%;
        max-width: 1400px;
        margin-inline: auto;
    }

    #news-header {
        font-size: min(8vw, 36px);
        margin-right: auto;
    }

    .news-container {
        display: flex;
        flex-direction: row;
        gap: 25px;

        width: 100%;
        align-items: left;
    }

    .news-list {
        display: flex;
        flex-direction: column;

        gap: 20px;
    }

    #news-footer {
        width: 100%;
        display: flex;

        margin-top: 25px;
    }

    .dummy {
        width: 100%;
    }

    #more-posts {
        flex-grow: 1;
        min-width: 10em;
    }

    a {
        white-space: nowrap;
    }

    .main-title {
        color: var(--text1);
        margin: 0 auto;
        width: 80%;
        text-align: center;
    }

    .main-title > h1 {
        font-size: 9vw; /* Change if title changes */
    }

    .main-title {
        font-family: var(--title-font);
        color: var(--text1);
    }
</style>

{#if mobile}
    <style>
        #news-section {
            transition-duration: 500ms;
            transition-property: width;
            width: 90% !important;
        }
        .news-container {
            flex-direction: column !important;
        }

        .dummy {
            width: 0% !important;
        }

        /* #more-posts { */
        /*     flex-grow: 1 !important; */
        /* } */

    </style>
{/if}

