<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>Deprived Devs</h1>
    <div class="collapse collapse-arrow bg-base-200 text-start">
        <input type="radio" name="my-accordion-2" checked/>
        <div class="collapse-title text-xl font-medium "><b>Alex / Zhen</b></div>
        <div class="collapse-content">
            <p>Hello, I am Zhen Aka. Alex.</p>
            <p>Here's my portfolio: <a href="/zhen/cv/rev1?hideOnPrint=1" style="color:lightblue;">pdf</a></p>
        </div>
        <!-- </div>
        <div class="collapse collapse-arrow bg-base-200">
        <input type="radio" name="my-accordion-2" />
        <div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
        <div class="collapse-content">
            <p>hello</p>
        </div>
        </div>
        <div class="collapse collapse-arrow bg-base-200">
        <input type="radio" name="my-accordion-2" />
        <div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
        <div class="collapse-content">
            <p>hello</p>
        </div> -->
    </div>
</div>

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

