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

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

<div class="poster">
    {#if image}
        <a href="/shop/poster-{location.slug}">
            <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"
        />
        <Button
            type="button"
            text="Add to cart"
            color="pinklight"
            size="xsmall"
        />
    </div>
</div>