<template>
  <article
    ref="root"
    class="PriceCard card bg-blue"
    :class="{ deleting }"
  >
    <header class="padding">
      <div class="name-price">
        <span>{{ card.name || 'Kein Name' }}</span>
        <span>{{ intl.format(card.price)}}</span>
      </div>
      <PpButton class="text-white" @click="update()">
        <Icon class="icon" name="uil:ellipsis-v" mode="svg" />
      </PpButton>
    </header>
    <main class="wrapper padding">
      <div class="info flex-col">
        <div class="price">
          <Icon class="icon" name="uil:toilet-paper" mode="svg" />
          <span class="value">{{ intl.format(card.ppr) }}</span>
        </div>
        <span class="pro">Pro 1</span>
      </div>
      <div class="info flex-col">
        <div class="price">
          <Icon class="icon" name="uil:file-landscape" mode="svg" />
          <span class="value">{{ intl.format(card.pps) }}</span>
        </div>
        <span class="pro">Pro 10</span>
      </div>
      <div class="info flex-col">
        <div class="price">
          <Icon class="icon" name="uil:layer-group" mode="svg" />
          <span class="value">{{ intl.format(card.ppl) }}</span>
        </div>
        <span class="pro">Pro 100</span>
      </div>
    </main>
  </article>
</template>

<script setup lang="ts">
import type { Card } from '../../../shared/Card'

type Props = {
  deletable: boolean
  card: Card
}

const { card } = defineProps<Props>()
const emit = defineEmits(['remove', 'update'])

const root = ref<HTMLElement>()
const deleting = ref<boolean>(false)

const intl = Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
})

const update = () => emit('update')

const deleteCard = async () => {
  root.value?.addEventListener('transitionend', () => emit('remove'))
  deleting.value = true
}
</script>
