<template>
  <section class="content flex-col">
    <div class="pc-wrapper flex-col">
      <PpPriceCard
          v-for="card in cards"
          :key="card"
          :uid="card"
          :deletable="cards.length > 1"
          @remove="removeCard"
      />
    </div>
  </section>
  <PpToolbar>
    <PpButton class="mini-button text-white" @click="addCard">
      <Icon class="icon" name="uil:plus" mode="svg" />
      <span>Hinzufügen</span>
    </PpButton>
    <PpButton class="mini-button text-white" @click="calculate">
      <Icon class="icon" name="uil:calculator" mode="svg" />
      <span>Berechnen</span>
    </PpButton>
  </PpToolbar>
</template>

<script setup lang="ts">
const initialId = crypto.randomUUID()

const cards = useState('cards', () => [
  initialId,
])

const addCard = () => {
  cards.value.push(crypto.randomUUID())
}

const removeCard = (uuid : string) => {
  cards.value = cards.value.filter((c) => c !== uuid)
}

const calculate = () => {}
</script>
