import React from 'react';

const InputField = ({ label, id, type = 'text', value, onChange, error, className = '', readOnly = false, required = false, placeholder = '' }) => (
    <div className={`flex flex-col ${className}`}>
        <label htmlFor={id} className="text-sm font-medium text-gray-700 mb-1">
            {label} {required && <span className="text-red-500">*</span>}
        </label>
        {type === 'textarea' ? (
            <textarea
                id={id}
                value={value || ''}
                onChange={onChange}
                readOnly={readOnly}
                required={required}
                placeholder={placeholder}
                rows="2"
                className={`px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-shadow text-gray-800 ${
                    error ? 'border-red-500 bg-red-50' : (readOnly ? 'border-gray-300 bg-gray-100' : 'border-gray-300 focus:border-indigo-500')
                } placeholder-gray-400`}
            ></textarea>
        ) : (
            <input
                id={id}
                type={type}
                value={value || ''}
                onChange={onChange}
                readOnly={readOnly}
                required={required}
                placeholder={placeholder}
                className={`px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-shadow text-gray-800 ${
                    error ? 'border-red-500 bg-red-50' : (readOnly ? 'border-gray-300 bg-gray-100' : 'border-gray-300 focus:border-indigo-500')
                } placeholder-gray-400`}
            />
        )}
        {error && <p className="text-xs text-red-500 mt-1 font-medium">{error}</p>}
    </div>
);

export default InputField;