<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';
    import Timeline from '../comps/timeline/timeline.svelte';

    export let data; // <- contains post data

    $: most_recent_post = data.summaries[0];

    const mobileThreshold : string = '1000px';
    let mobile : boolean;
    const post_show_count : number = 3;
</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 -->
        <div class="showcase">
            <ShowcaseNewsCard
                thumbnail_url={most_recent_post.cover_img}
                thumbnail_alt={most_recent_post.cover_alt}
                post_url={most_recent_post.url}
                title={most_recent_post.title}
                summary={most_recent_post.summary}
                creation_date={most_recent_post.creation_date}
            />
        </div>

        <div class="news-list">
            {#each data.summaries.slice(1, post_show_count) as summary}
                <NewsCard
                    thumbnail_url={summary.cover_img}
                    thumbnail_alt={summary.cover_alt}
                    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 href="/posts" type={ButtonType.Primary}>
                <span slot="content">More News</span>
            </Button>
        </div>
    </footer>
</section>

<Timeline/>

<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;
    }

    .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}

