<script lang="ts">
    import SpaceCard from "$lib/components/SpaceCard.svelte";
    import defaultImg from "$lib/assets/study_space.png";
    import crossUrl from "$lib/assets/cross.svg";
    import Navbar from "$lib/components/Navbar.svelte";

    const { data } = $props();
    const { studySpaces, supabase } = $derived(data);
</script>

<Navbar>
    <a href="/space">
        <img src={crossUrl} alt="new" class="new-space" />
    </a>
</Navbar>

<main>
    {#each studySpaces as studySpace (studySpace.id)}
        {@const imgUrl =
            studySpace.study_space_images.length > 0
                ? supabase.storage
                      .from("files_bucket")
                      .getPublicUrl(studySpace.study_space_images[0].image_path).data.publicUrl
                : defaultImg}
        <SpaceCard
            alt="Photo of {studySpace.description}"
            href="/space/{studySpace.id}"
            imgSrc={imgUrl}
            space={studySpace}
        />
    {/each}
</main>

<style>
    main {
        display: grid;
        box-sizing: border-box;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 1rem;
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .new-space {
        transform: rotate(45deg);
    }

    @media (max-width: 20rem) {
        main {
            grid-template-columns: 1fr;
        }
    }
</style>
