Duffer Derek

import React from 'react';
import './text-area.scss';

export const TextArea = ({label, placeholder, value, clName, permission, onChange, error, rows = 4, name}) => {
  const isViewOnly = permission === 'view-only' || permission === 'view';
  
  // Use controlled component if onChange is provided, otherwise use uncontrolled
  const textareaProps = onChange 
    ? { value, onChange }
    : { defaultValue: value };
  
  return (
    <div className={`form-group textarea${clName ? ` ${clName}` : ''}${error ? ' error' : ''}`}>
      <label>{label} </label>
      <textarea 
        name={name}
        rows={rows}
        placeholder={placeholder} 
        className={isViewOnly ? 'view-mode' : 'edit-mode'}
        {...textareaProps}
        readOnly={isViewOnly}
      />
      {error && (
        <p className="error-message">{error}</p>
      )}
    </div>
  )
}