<template>
  <div>
    

    <div class="py-3" style="text-align: center;">
      Válassz egy kategóriát
    </div>
    <div class="flex flex-col gap-3 p-3">
      <Card v-for="categori in categories" :pt="{ root: 'mb-3' }">
        <template #content>
          <div class="flex">
            <div class="flex justify-center items-center text-3xl font-bold" style="width: 56px; font-size: 32px;">{{ categori.shortname }}</div>
            <div>
              <div class="text-sm">{{ categori.name }}</div>
              <div class="text-primary-500">{{ HUFormat.format(categori.price) }} / nap</div>
            </div>
          </div>
        </template>
      </Card>
    </div>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  rentStep: 2,
})
const categoriestStore = useCategoriesStore()

const categories: CategoryType[] = computed(() => {
  return categoriestStore.categories
}) 

let HUFormat = new Intl.NumberFormat('hu-HU', {
    style: 'currency',
    currency: 'HUF',
    maximumFractionDigits:0
});
</script>

<style>

</style>