<script lang="ts">
    import { getContext } from 'svelte'
    // Components
    import Metas from '$components/Metas.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
    import Locations from '$components/organisms/Locations.svelte'
    import Shop from '$components/organisms/Shop.svelte'
    import Newsletter from '$components/organisms/Newsletter.svelte'
    import SiteTitle from '$components/atoms/SiteTitle.svelte'

    export let photos: any

    const { locations }: any = getContext('global')
</script>

<Metas
    title="Locations"
    description=""
    image=""
/>

<main class="explore">
    <section class="explore__intro">
        <SiteTitle variant="inline" />
        <p class="text-medium">Explore the globe to discover unique locations across the world</p>
    </section>

    <section class="explore__locations" id="locations">
        <InteractiveGlobe />
        <Locations {locations} />
    </section>

    <section class="grid-modules grid">
            <div class="wrap">
                <Shop />
                <Newsletter />
            </div>
    </section>
</main>


<script context="module" lang="ts">
    import { fetchAPI } from '$utils/api'

    export async function load ({ page, fetch, session, stuff }) {
        const res = await fetchAPI(`
            query {
                photo (limit: 11, sort: ["-date_created"]) {
                    image {
                        id
                        title
                    }
                }
            }
        `)

        const { data } = res

        return {
            props: {
                photos: data.photo,
            }
        }
    }
</script>
