<script setup>
import { useNavigatorLanguage } from "@vueuse/core";
import { computed } from "vue";
import { getLocalizedText } from "../../../share/locale";
import { cn } from "../../../utils/cn";
defineOptions({ name: "UiPickerShortcuts" });
const props = defineProps({
  items: { type: Array, required: true },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const emits = defineEmits(["select"]);
const nav = useNavigatorLanguage();
const lang = computed(() => nav.language.value?.split("-")[0] ?? "en");
function label(name) {
  return getLocalizedText(name, lang.value) ?? "";
}
</script>

<template>
  <div
    data-slot="picker-shortcuts"
    :class="cn(
  'border-zinc-200 flex flex-wrap items-center gap-1 border-t px-2 py-2 text-xs',
  props.class
)"
  >
    <button
      v-for="(item, index) in props.items"
      :key="index"
      type="button"
      class="text-zinc-700 hover:bg-zinc-100 hover:text-(--primary) cursor-pointer rounded px-2 py-1"
      @click="emits('select', index)"
    >
      {{ label(item.name) }}
    </button>
  </div>
</template>
