Duffer Derek

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

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