<script lang="ts">
    import type { PageData } from './$types'
    import { getContext } from 'svelte'
    import { shopCurrentProductSlug } from '$utils/stores/shop'
    // Components
    import PageTransition from '$components/PageTransition.svelte'
    import Metas from '$components/Metas.svelte'
    import PostersGrid from '$components/organisms/PostersGrid.svelte'
    import ShopHeader from '$components/organisms/ShopBanner.svelte'
    import PosterLayout from '$components/layouts/PosterLayout.svelte'

    export let data: PageData

    const { product, shopProduct }: { product: any, shopProduct: any } = data
    const { posters }: any = getContext('shop')

    // Update current random product slug
    $shopCurrentProductSlug = product.location.slug
</script>

<Metas
    title="Shop – Houses Of"
    description="Welcome to the Houses Of Shop, discover our original series of graphic posters made for lovers of design, travel and photography"
    image=""
/>


<PageTransition name="shop-page">
    <ShopHeader {product} />

    <PosterLayout
        product={product}
        shopProduct={shopProduct}
    />

    <PostersGrid {posters} />
</PageTransition>