<template>
  <div class="textarea">
    <label :for="id">{{ label }}</label>

    <textarea
      autocomplete="off"
      v-model="model"
      v-bind="$attrs"
      :class="$attrs.class"
      :id="id"
    />

    <slot />
  </div>
</template>

<style scoped>
.textarea {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.textarea label {
  font-size: 0.85rem;
  user-select: none;
  -webkit-user-select: none;
}

.textarea textarea {
  background-color: var(--bg-sub-color);
  color: var(--text-color);
  font-size: 1rem;
  resize: vertical;
  field-sizing: content;
  border: 1px solid transparent;
  outline: none;
  padding: 0.6rem;
  border-radius: 0.25rem;
  transition: border 200ms ease-out;
}

.textarea textarea:hover {
  border: 1px solid var(--border-color);
}

.textarea textarea:focus {
  border: 1px solid var(--accent-color);
}
</style>

<script lang="ts" setup>
import { useId } from "vue";

defineProps<{
  label: string;
}>();

const model = defineModel<string>();
const id = useId();
</script>