<script setup>
import { defineProps } from "vue";

const props = defineProps({
  name: String,
  value: String,
  placeholder: String,
});
</script>

<template>
  <label class="form-control">
    <div class="label">
      <span class="label-text text-lg"><slot name="topLeft"></slot></span>
      <span class="label-text-alt"> <slot name="topRight"></slot></span>
    </div>
    <textarea
      class="textarea text-lg rounded-md border-info focus-within:border-info h-24"
      :placeholder="placeholder"
      :name="name"
      v-model="value[name]"
    ></textarea>
    <div class="">
      <span class="label-text-alt"> <slot name="bottomLeft"></slot></span>
      <span class="label-text-alt"> <slot name="bottomRight"></slot></span>
    </div>
  </label>
</template>

<style lang="scss" scoped></style>
