import React from 'react';

interface ProrankInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
  value?: string | number;
  onChange?: (value: string) => void;
  label?: string;
  help?: string;
  className?: string;
}

const ProrankInput: React.FC<ProrankInputProps> = ({
  value = '',
  onChange,
  label,
  help,
  className = '',
  ...props
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (onChange) {
      onChange(event.target.value);
    }
  };

  if (label || help) {
    return (
      <div className={`prorank-form-group ${className}`.trim()}>
        {label && <label className="prorank-form-label">{label}</label>}
        {help && <p className="prorank-form-help">{help}</p>}
        <div className="prorank-input-wrapper">
          <input
            className="prorank-input"
            value={value}
            onChange={handleChange}
            {...props}
          />
        </div>
      </div>
    );
  }

  return (
    <input
      className={`prorank-input ${className}`.trim()}
      value={value}
      onChange={handleChange}
      {...props}
    />
  );
};

export { ProrankInput };
export default ProrankInput;