<script setup>
import { computed } from 'vue';
import { cn } from '@/lib/utils';

const props = defineProps({
  modelValue: String,
  placeholder: String,
  disabled: Boolean,
  readonly: Boolean,
  rows: { type: Number, default: 3 },
  class: String
});

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

const classes = computed(() => cn(
  'flex min-h-[80px] w-full rounded-md glass glass-border px-3 py-2 text-sm placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-50 resize-none',
  props.class
));

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

<template>
  <textarea
    :value="modelValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :readonly="readonly"
    :rows="rows"
    :class="classes"
    @input="handleInput"
  />
</template>
