<style lang="scss">
    @import "../../style/molecules/poster";
</style>

<script lang="ts">
    import { addToCart } from '$utils/functions/shop'
    import { smoothScroll } from '$utils/stores'
    // Components
    import Button from '$components/atoms/Button.svelte'
    import Image from '$components/atoms/Image.svelte'

    export let product: any
    export let location: { name: string, slug: string }
    export let image: any
</script>

<div class="poster">
    {#if image}
        <a href="/shop/poster-{location.slug}" data-sveltekit-noscroll
            on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
        >
            <Image
                id={image.id}
                sizeKey="product"
                sizes={{
                    small: { width: 326 },
                    medium: { width: 326 },
                    large: { width: 326 },
                }}
                ratio={1.5}
                alt="Poster of {location.name}"
            />
        </a>
    {/if}
    <div class="buttons">
        <Button
            size="xsmall"
            url="/shop/poster-{location.slug}"
            text="View"
            on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
        />
        <Button
            tag="button"
            size="xsmall"
            text="Add to cart"
            color="pink"
            on:click={() => addToCart(product)}
        />
    </div>
</div>
