<template>
  <div class="flex items-center flex-nowrap w-fit select-none pr-1">
    <div
      class="transition-colors category-item cursor-pointer flex-shrink-0 mx-[10px] first-of-type:ml-0 last-of-type:mr-0 flex items-center justify-center whitespace-nowrap"
      :class="{
        'category-item-active': categoryItem.id === focusedId,
      }"
      v-for="categoryItem in list"
      @click="$emit('update:focusedId', categoryItem.id)"
      :ref="
        (el) => {
          els.push({
            id: categoryItem.id,
            el: el as Element,
          });
        }
      "
    >
      <div class="overflow-hidden overflow-ellipsis select-none px-2">
        {{ categoryItem.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, unref } from "vue";

defineProps<{
  list: { id: number; name: string }[];
  focusedId: number;
}>();

const els = ref<{ id: number; el: Element }[]>([]);

defineExpose({
  getEls: () => unref(els),
});

defineEmits(["update:focusedId"]);
</script>

<style scoped lang="scss">
.category-item {
  width: 148px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #d1d1d1;
  font-size: 13px;
  font-weight: 400;
  color: #767676;
  &.category-item-active {
    border: 1px solid var(--sy-black);
    font-weight: 500;
    color: var(--sy-black);
  }
}
</style>
