<template>
  <div class="new-style py-1">
    <label
      v-if="!!label"
      class="pl-0 pb-2 sh-label"
      :for="props.id"
      data-testid="label"
    >
      <span>{{ props.label }}</span>
    </label>
    <v-textarea
      v-bind="attrs"
      :v-slot="slots"
      class="pt-2"
      bg-color="white"
      variant="outlined"
      density="comfortable"
      clearable
    >
      <template
        v-for="(_, name) in slots"
        v-slot:[name]="slotData"
      >
        <slot
          :name="name"
          v-bind="slotData"
        ></slot>
      </template>
    </v-textarea>
  </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>
