<script lang="ts">
    import { getContext } from 'svelte'
    import { page } from '$app/stores'
    // Components
    import Metas from '$components/Metas.svelte'
    import SiteTitle from '$components/atoms/SiteTitle.svelte';
    import Image from '$components/atoms/Image.svelte';
import PosterProduct from '$components/organisms/PosterProduct.svelte';
import Poster from '$components/molecules/Poster.svelte';
import Newsletter from '$components/organisms/Newsletter.svelte';
import EmailForm from '$components/molecules/EmailForm.svelte';

    export let photos: any
</script>

<Metas
    title="Houses Of"
    description=""
    image=""
/>

<main class="shop-page">
    <header class="shop-page__header">
        <p class="text-label">Shop your city</p>
        <nav>
            <ul>
                <li>
                    <a href="#">Bordeaux</a>
                </li>
                <li>
                    <a href="#">Brisbane</a>
                </li>
                <li>
                    <a href="#">Melbourne</a>
                </li>
                <li>
                    <a href="#">Montpellier</a>
                </li>
                <li>
                    <a href="#">Occitanie</a>
                </li>
                <li>
                    <a href="#">Toulouse</a>
                </li>
            </ul>
        </nav>
        <div class="cart">
            <span>2 items</span>
        </div>
    </header>

    <section class="shop-page__intro">
        <Image
            id="d439adf1-2391-415b-bb24-232839f142d4"
            sizeKey="photo-list"
            width={1600}
            height={1000}
            alt="photo"
        />
        <SiteTitle
            variant="inline"
        />
    </section>

    <section class="shop-page__about grid">
        <p class="description text-normal">Welcome to our shop!<br />We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.</p>
    </section>
    <PosterProduct />

    <section class="shop-page__posters grid">
        <h3>View all of our available posters</h3>
        <div class="set">
            <Poster />
            <Poster />
            <Poster />
            <Poster />
            <Poster />
            <Poster />
        </div>
        <div class="subscribe">
            <p>Subscribe to be notified when new posters become available</p>
            <EmailForm />
        </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"]) {
                    slug
                    title
                    city
                    location {
                        name
                        slug
                        country {
                            slug
                            name
                            flag { id }
                        }
                    }
                    image { id }
                }
            }
        `)

        const { data } = res

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