<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { SelectContent as ShadcnSelectContent } from '@/components/core/select';
import { omitClass } from '@/lib/utils';
import type { UiSelectContentProps, UiSelectContentEmits } from './types';

defineOptions({
  name: 'UiSelectContent',
  inheritAttrs: false,
});

const props = withDefaults(defineProps<UiSelectContentProps>(), {
  side: 'bottom',
  sideOffset: 4,
  align: 'start',
  position: 'popper',
});

const emit = defineEmits<UiSelectContentEmits>();

const attrs = useAttrs();

const forwardedAttrs = computed(() => omitClass(attrs));
</script>

<template>
  <ShadcnSelectContent
    v-bind="forwardedAttrs"
    :side="props.side"
    :side-offset="props.sideOffset"
    :align="props.align"
    :position="props.position"
    :class="props.class"
    @escape-key-down="emit('escapeKeyDown', $event)"
    @pointer-down-outside="emit('pointerDownOutside', $event)"
  >
    <slot />
  </ShadcnSelectContent>
</template>
