<template>
  <div class="absolute top-2/4 -translate-y-2/4 uno-r-10 z-1">
    <div
      class="uno-fs-12 text-center uno-py-1"
      v-for="item in list"
      @click.stop="onClickLetterPosition(item)"
      :key="item"
    >
      {{ item }}
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "LetterPosition",
};
</script>

<script setup lang="ts">
type Props = {
  list?: string[];
};
withDefaults(defineProps<Props>(), {
  list: null,
});

const emit = defineEmits<{
  (e: "onClickLetterPosition", val: string);
}>();

const onClickLetterPosition = (val) => {
  emit("onClickLetterPosition", val);
};
</script>
