import cx from 'classnames';
import React from 'react';

import css from './input.module.css';

// -- TYPES

interface IInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
  className: {
    base?: string;
    input?: string;
  };
  icon?: React.ReactNode;
}

// -- MAIN

function Input({ icon, className, ...inputAttrs }: IInputProps) {
  const cn = cx(className.base, css.base);
  const cnInput = cx(className.input, css.input);

  return (
    <div className={cn}>
      {icon}
      <input className={cnInput} {...inputAttrs} />
    </div>
  );
}

Input.defaultProps = {
  type: 'text',
  className: {},
};

export default Input;