<template>
    <div class="textarea-wrapper">
        <label v-if="label" :for="id" class="textarea-label">{{ label }}</label>
        <div class="relative">
            <textarea :id="id" :value="modelValue"
                @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
                :placeholder="placeholder" :rows="rows" :disabled="disabled" :class="textareaClasses"></textarea>
        </div>
        <p v-if="description" class="textarea-description">{{ description }}</p>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
    modelValue: string
    id?: string
    label?: string
    placeholder?: string
    rows?: number
    disabled?: boolean
    description?: string
    variant?: 'default' | 'error'
}

const props = withDefaults(defineProps<Props>(), {
    id: () => `textarea-${Math.random().toString(36).substring(2, 9)}`,
    rows: 4,
    disabled: false,
    variant: 'default',
})

defineEmits(['update:modelValue'])

const baseClasses = `
    w-full px-3 py-2 rounded-lg border bg-transparent
    transition-colors duration-micro ease-micro
    focus:outline-none focus:ring-2 focus:ring-primary-500
`

const variantClasses = {
    default: `
        border-border-secondary placeholder:text-text-tertiary
        hover:border-border-primary
        dark:border-neutral-700 dark:hover:border-neutral-500
    `,
    error: `
        border-error-500 ring-1 ring-error-500
        dark:border-error-400 dark:ring-error-400
    `,
}

const textareaClasses = computed(() => [
    baseClasses,
    variantClasses[props.variant],
    { 'opacity-50 cursor-not-allowed': props.disabled }
])
</script>

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

.textarea-label {
    @apply block text-sm font-medium text-text-primary mb-1;
}

.textarea-description {
    @apply text-xs text-text-secondary mt-1;
}
</style>