<template>
  <div class="new-style py-0">
    <label v-if="label !== false" class="pl-0 pb-1 sh-label" :for="props.id" data-testid="label">
      {{ props.label }}
    </label>
    <v-select
      :ref="childRef"
      :list-props="{ class: 'pa-2' }"
      class="pt-1 my-select"
      variant="outlined"
      density="comfortable"
      clearable
      menu-icon="keyboard_arrow_down"
      v-bind="{ ...attrs, ...slots }"
      :v-slot="slots"
    >
      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
        <slot :name="name" v-bind="slotData"></slot>
      </template>
    </v-select>
  </div>
</template>

<script setup lang="ts">
import { useAttrs, useSlots } from 'vue';

interface Props {
  label: string | boolean;
  id?: string | undefined;
  childRef?: string | undefined;
}

const props = withDefaults(defineProps<Props>(), {
  label: 'Label',
  id: `${Math.random() * 10000}`
});

const attrs = useAttrs();
const slots = useSlots();
</script>

<style lang="scss">
.v-select {
  .v-select__menu-icon {
    color: rgba(104, 117, 236, 1);
  }
}
</style>
