'use client';

import React from 'react';

const Textarea = ({
    value,
    onChange,
    placeholder = '',
    label,
    error,
    required = false,
    disabled = false,
    className = '',
    description,
    rows = 4,
    ...props
}) => {
    const baseTextareaClassName = `w-full px-3 py-2.5 bg-white dark:bg-neutral-900/60 border rounded-lg text-[13px] text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:border-neutral-500 dark:focus:border-neutral-600 focus:ring-1 focus:ring-neutral-500/20 dark:focus:ring-neutral-600/20 hover:bg-neutral-50 dark:hover:bg-neutral-900/80 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed resize-y ${
        error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50'
    } ${className}`;

    const handleChange = (e) => {
        onChange?.(e.target.value);
    };

    return (
        <div className="space-y-2">
            {label && (
                <label className="block text-xs font-medium text-neutral-700 dark:text-neutral-400">
                    {label}
                    {required && <span className="text-red-600 dark:text-red-400 ml-1">*</span>}
                </label>
            )}
            
            <textarea
                value={value}
                onChange={handleChange}
                placeholder={placeholder}
                className={baseTextareaClassName}
                disabled={disabled}
                rows={rows}
                {...props}
            />
            
            {error && (
                <p className="text-red-600 dark:text-red-400 text-xs">{error}</p>
            )}
            
            {description && !error && (
                <p className="text-xs text-neutral-500 dark:text-neutral-400 opacity-75">{description}</p>
            )}
        </div>
    );
};

export default Textarea; 