<script lang="ts">
	import Title from "$lib/components/extra/Title.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import type { PageServerData } from './$types';

	let { data }: { data: PageServerData } = $props();
</script>

<div class="p-6 md:w-1/2">
    <Title class="text-5xl"></Title>
    <div class="pb-2">A extremely simple chatting application. Supports mobile devices (as a PWA), and also works on almost every single screen size (responsive design!)</div>

    <div class="pb-2">
        Featurelist:
        <ul class="list-disc pl-6">
            <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </li>
            <li>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</li>
            <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
            <li>It has survived not only five centuries, but also the leap into electronic typesetting,</li>
            <li>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</li>
        </ul>
    </div>

    <div class="pb-2">
        Screenshots

        <div class="grid grid-cols-2 grid-rows-2 w-76 gap-2">
            <img src="https://placehold.co/150x150" alt="temporary placeholder image"/>
            <img src="https://placehold.co/150x150" alt="temporary placeholder image"/>
            <img src="https://placehold.co/150x150" alt="temporary placeholder image"/>
            <img src="https://placehold.co/150x150" alt="temporary placeholder image"/>
        </div>
    </div>

    <div class="flex flex-col gap-3 w-[calc(80%)]">
        {#if data.user?.id}
            <Button href='/app'>Enter</Button>
            <Button href='/?logout'>Log out</Button>
        {:else}
            <Button href='/login'>Log in</Button> <Button href='/register'>Register</Button>
        {/if}
    </div>
</div>
