<template>
  <div class="flex w-full flex-col space-y-2">
    <ts-normal-text>
      <slot name="title" />
    </ts-normal-text>
    <textarea
      :rows="rows"
      v-model="content"
      :class="`focus:outline-none border-[1px] resize-none border-gray-200 rounded ${padding} placeholder-slate-500`"
      :placeholder="placeholder"
    >
    </textarea>
  </div>
</template>
<script lang="ts">
import TsNormalText from "../TsTypography/normalText.vue";
import { ref, watch } from "vue";

export default {
  components: {
    TsNormalText,
  },
  props: {
    padding: {
      type: String,
      default: "py-3 px-3",
    },
    placeholder: {
      type: String,
      default: "",
    },
    rows: {
      type: String,
      default: "5",
    },
  },
  name: "TsTextArea",
  emits: ["update:modelValue"],
  setup(props: any, context: any) {
    const content = ref("");

    watch(content, () => {
      context.emit("update:modelValue", content.value);
    });

    return {
      content,
    };
  },
};
</script>
