<script setup lang="ts">
import { SelectTrigger as ShadcnSelectTrigger } from '@/components/core/select';
import type { UiSelectTriggerProps } from './types';

defineOptions({
  name: 'UiSelectTrigger',
});

const props = withDefaults(defineProps<UiSelectTriggerProps>(), {
  ariaLabel: undefined,
  disabled: false,
});

// shadcn trigger styles target only SVG icons (`[&_svg]...`) but our icons are spans (`data-slot="icon"`).
// Add equivalent sizing/behavior + rotate-on-open for the chevron.
const uiIconTriggerClasses =
  '[&_[data-slot=icon]]:pointer-events-none [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:transition-transform [&_[data-slot=icon]]:duration-200 [&[data-state=open]_[data-slot=icon]]:rotate-180';
</script>

<template>
  <ShadcnSelectTrigger
    :disabled="props.disabled"
    :aria-label="props.ariaLabel"
    :class="uiIconTriggerClasses"
  >
    <slot />
  </ShadcnSelectTrigger>
</template>
