Duffer Derek

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

export const SelectField = ({label, value, options = [], clName, permission, onChange, error, name}) => {
  const isViewOnly = permission === 'view-only' || permission === 'view';
  
  // Use controlled component if onChange is provided, otherwise use uncontrolled
  const selectProps = onChange 
    ? { value, onChange }
    : { defaultValue: value };
  
  return (
    <div className={`form-group${clName ? ` ${clName}` : ''}${error ? ' error' : ''}`}>
      <label>{label} </label>
      <select 
        name={name}
        className={isViewOnly ? 'view-mode' : 'edit-mode'}
        {...selectProps}
        disabled={isViewOnly}
      >
        {options.map((option, index) => (
          <option key={index} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {error && (
        <p className="error-message">{error}</p>
      )}
    </div>
  )
}