<template>
  <div>
    <div class="text-center">Kategória</div>
    <div class="flex flex-col gap-3 p-3">
      <Card v-for="categori in categories" :pt="{ root: '' }" @click="next(categori)">
        <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>
const { rent } = storeToRefs(useAuthStore())

definePageMeta({
  rentStep: 6,
  title: 'Válassz egy kategóriát'
})
const categoriestStore = useCategoriesStore()

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

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

function next(category) {
  rent.value.category_id = category.category_id
  rent.value.valasztott_auto = category.shortname + ' ' + category.name
  navigateTo('/rent/preview')
}
</script>

<style></style>