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

<script lang="ts">
    import { fly } from 'svelte/transition'
    import { quartOut } from 'svelte/easing'
    import { cartOpen } from '$utils/stores/shop'

    export let title: string
    export let name: string
    export let image: string


    const closeNotification = () => {
        // Open cart
        $cartOpen = true
    }
</script>

<div class="notification-cart shadow-small"
    transition:fly={{ y: 20, duration: 700, easing: quartOut }}
    on:click={closeNotification}
    on:keydown
    role="presentation"
>
    <div class="left">
        <img src={image} width={58} height={88} alt={title}>
    </div>
    <div class="right">
        <h3>{title}</h3>
        <p>{name}</p>
    </div>
</div>
