<script setup lang="ts">
import { getSelectedProfile } from '@/api/profile'
import { useRoute, useRouter } from 'vue-router'
import AppBadge from './common/AppBadge.vue'

interface CategoryInfo {
  id: number
  name: string
  color: string
}

const route = useRoute()
const router = useRouter()
const props = defineProps<{ category: CategoryInfo; clickable?: boolean }>()

function onClicked() {
  if (props.clickable) {
    router.push(`/profiles/${getSelectedProfile(route)}/categories/${props.category?.id}`)
  }
}
</script>
<template>
  <AppBadge
    @click="onClicked()"
    :style="{ cursor: clickable ? 'pointer' : 'inherit' }"
  >
    <div
      class="category-label-color"
      :style="{ 'background-color': '#' + category.color }"
    ></div>
    {{ category.name }}
  </AppBadge>
</template>
<style lang="css">
.category-label-color {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.1rem;
}
</style>
