// stores/cart.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCartStore = defineStore('cart', () => {
  const items = ref([]);

  const totalItems = computed(() =>
    items.value.reduce((sum, item) => sum + item.quantity, 0)
  );

  function addToCart(product) {
    const existing = items.value.find((i) => i.id === product.id);
    if (existing) {
      existing.quantity++;
    } else {
      items.value.push({ ...product, quantity: 1 });
    }
  }

  return { items, totalItems, addToCart };
});


<!-- src/ProductList.vue -->
<script setup>
import { useCartStore } from './stores/cart';
const cart = useCartStore();

const products = [
  { id: 1, name: 'Keyboard' },
  { id: 2, name: 'Mouse' },
];
</script>

<template>
  <button v-for="p in products" :key="p.id" @click="cart.addToCart(p)">
    Add {{ p.name }}
  </button>
</template>


<!-- src/CartDisplay.vue -->
<script setup>
import { storeToRefs } from 'pinia';
import { useCartStore } from './stores/cart';

const cart = useCartStore();
const { items, totalItems } = storeToRefs(cart); // reactive state/getters
</script>

<template>
  <p>Total items: {{ totalItems }}</p>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }} x{{ item.quantity }}
    </li>
  </ul>
</template>

<!--
  Notes:
  - addToCart finds an existing entry to bump its quantity, otherwise
    pushes a new one — the same duplicate-check logic as React Project 6
    and the Angular cart, here mutating the store's own reactive array
    (mutation is fine INSIDE a Pinia action).
  - CartDisplay uses storeToRefs to destructure items/totalItems while
    keeping them reactive; a plain const { items } = cart would have
    given a disconnected snapshot.
  - addToCart (an action/function) is read off `cart` directly in
    ProductList — actions don't need storeToRefs.
-->