<script lang='ts' setup>
import { client, safeClient } from "@/api";

const { t } = useI18n();
const model = defineModel({ type: String, default: "" });

const { data: categories } = await safeClient(() => client.api.rwa.category.categories.get());
</script>

<template>
  <ion-content :scroll-x="true" :scroll-y="false" class="w-full h-6">
    <div class="flex items-center whitespace-nowrap space-x-4">
      <div class="item" :class="{ active: model === '' }" @click="model = ''">
        {{ t('market.category.all') }}
      </div>
      <div
        v-for="item in categories?.data"
        :key="item.id"
        class="item"
        :class="{ active: model === item.id }"
        @click="model = item.id"
      >
        {{ item.name }}
      </div>
    </div>
  </ion-content>
</template>

<style scoped>
@reference "tailwindcss";

ion-content::part(scroll) {
  scrollbar-width: none;
}

.item {
  @apply px-3 py-1 rounded-full text-xs transition-all;
}
.ion-palette-dark {
  .item {
    @apply bg-(--ion-color-step-800);
  }
}
.item.active {
  @apply bg-(--ion-color-success) text-white;
}
</style>
