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

<script lang="ts">
    import { scale } from 'svelte/transition'
    import { quartOut } from 'svelte/easing'
    import { cartOpen, cartAmount } from '$utils/stores/shop'
    import { sendEvent } from '$utils/analytics'
    // Components
    import Icon from '$components/atoms/Icon.svelte'
    import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'

    const openCart = () => {
        $cartOpen = true
        sendEvent('cartOpen')
    }
</script>

<div class="button-cart">
    <ButtonCircle color="purple" onclick={openCart}>
        <Icon icon="bag" label="Cart icon" />
        {#if $cartAmount > 0}
            <span class="quantity" transition:scale={{ start: 0.6, duration: 400, easing: quartOut }}>{$cartAmount}</span>
        {/if}
    </ButtonCircle>
</div>
