<template>
  <div class="new-style py-1">
    <label v-if="label !== false" class="pl-0 pb-2 sh-label" :for="props.id" data-testid="label">
      {{ props.label }}</label
    >
    <v-textarea
      :ref="childRef"
      class="pt-2"
      bg-color="white"
      variant="outlined"
      density="comfortable"
      clearable
      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-textarea>
  </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>
