<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">
            <Image
                id={shop.module_image.id}
                sizeKey="square"
                sizes={{
                    small: { width: 400, height: 400 },
                    large: { width: 800, height: 800 },
                }}
                alt={shop.module_image.title}
            />
        </div>

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