<script lang="ts">
    import { getContext } from 'svelte'
    // Components
    import Button from '$components/atoms/Button.svelte'
    import Image from '$components/atoms/Image.svelte'

    const { locations, shop } = getContext('global')

    const locationsWithPoster = locations
        .filter((loc: any) => loc.has_poster)
        .map((loc: any) => loc.name)
</script>

<div class="shop shadow-box-dark">
    <div class="content">
        <div class="shop__image">
            <img src="/images/poster-display.jpg" alt="">
            <Image id={shop.module_image.id} alt={shop.module_image.title} width={800} height={800} />
        </div>

        <div class="shop__content">
            <h3 class="title-medium">{shop.module_title}</h3>
            <p class="text-small">{shop.module_text}</p>
            <Button
                url="/shop"
                text="Shop"
                class="button--pink"
            />
            <p class="detail">
                Posters available for {locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.
            </p>
        </div>
    </div>
</div>