<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  required: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  rows: {
    type: Number,
    default: 4
  },
  resize: {
    type: String,
    default: 'vertical' // none, both, horizontal, vertical
  }
});

const emit = defineEmits(['update:modelValue']);

const updateValue = (event) => {
  emit('update:modelValue', event.target.value);
};
</script>

<template>
  <div class="rs-textarea-wrapper">
    <label v-if="label" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
      {{ label }}
      <span v-if="required" class="text-red-500">*</span>
    </label>
    
    <textarea
      :value="modelValue"
      @input="updateValue"
      :placeholder="placeholder"
      :disabled="disabled"
      :required="required"
      :rows="rows"
      class="rs-textarea"
      :class="{
        'rs-textarea-error': error,
        'rs-textarea-disabled': disabled,
        'resize-none': resize === 'none',
        'resize-both': resize === 'both',
        'resize-x': resize === 'horizontal',
        'resize-y': resize === 'vertical'
      }"
    ></textarea>
    
    <div v-if="error" class="rs-textarea-error-message">
      {{ error }}
    </div>
  </div>
</template>

<style scoped>
.rs-textarea-wrapper {
  @apply w-full;
}

.rs-textarea {
  @apply w-full px-3 py-2 border rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
  border-color: rgb(var(--fk-border-color));
  min-height: 2.5rem;
}

.rs-textarea:hover {
  @apply border-gray-400 dark:border-gray-500;
}

.rs-textarea:focus {
  @apply outline-none ring-2 ring-blue-500 border-blue-500;
}

.rs-textarea-error {
  @apply border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500;
}

.rs-textarea-disabled {
  @apply bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed;
}

.rs-textarea-error-message {
  @apply text-sm text-red-500 mt-1;
}
</style> 