import React from "react";

const TODInput = ({
  type = "text",
  value,
  onChange,
  label,
  details,
  placeholder,
  className = "",
  error = null,
  required = false,
  disabled = false,
  name = "",
  autoComplete = "off",
  onBlur = () => {},
  onFocus = () => {},
}) => {
  return (
    <div className={`form-group ${className}`}>
      {label && (
        <label className="form-label">
          {label}
          {required && <span className="error-message required">*</span>}
        </label>
      )}
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className={`form-input ${error ? "error" : ""}`}
        disabled={disabled}
        name={name}
        required={required}
        autoComplete={autoComplete}
        onBlur={onBlur}
        onFocus={onFocus}
      />
      {details && <span className="input-details">{details}</span>}
      {error && <span className="error-message">{error}</span>}
    </div>
  );
};

export default TODInput;
