import { memo, forwardRef } from 'react';
import cc from 'classcat';

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  error?: string;
}

export const Input = memo(
  forwardRef<HTMLInputElement, InputProps>(function Input(
    { className, error, ...props },
    ref
  ) {
    const outerClass = cc(['relative', 'w100']);
    const inputClass = cc(['input', className]);
    return (
      <div className={outerClass}>
        <input
          className={inputClass}
          type="text"
          title={props.placeholder}
          {...props}
          ref={ref}
        />
        {error && (
          <span className="input__error" title={error}>
            !
          </span>
        )}
      </div>
    );
  })
);