<template>
  <div class="new-style py-0">
    <label
      v-if="!!label"
      class="pl-0 pb-1 sh-label"
      :for="props.id"
      data-testid="label"
    >
      <span>{{ props.label }}</span>
    </label>
    <v-select
      v-bind="attrs"
      :v-slot="slots"
      :list-props="{ class: 'pa-2' }"
      class="pt-1 my-select"
      variant="outlined"
      density="comfortable"
      clearable
      menu-icon="keyboard_arrow_down"
    >
      <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 { v4 } from 'uuid';
import { useAttrs, useSlots } from 'vue';

interface Props {
  id?: string;
  label?: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: v4(),
  label: '',
});

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

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