import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';

interface Props {
    wrapperClassName?: string;
    className: string;
    icon?: string;
    leadingButton?: React.ReactNode;
    type?: string;
    rows?: number;
    [x:string]: any;
}
function Input(props: Props) {
    const { className, leadingButton = "", wrapperClassName = "", icon = "", type="text", rows=4, ...rest } = props;
    return (
        <div className={cn({ "relative" : icon || leadingButton }, wrapperClassName)}>
            {icon && <Icon name={icon} className="absolute top-0 bottom-0 my-auto ml-4" size="14" />}
            { type === 'textarea' ? (
                <textarea rows={rows} style={{ resize: 'none' }} maxLength={500} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
            ) : (
                <input type={type} style={{ height: '36px'}} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
            )}
            
            { leadingButton && <div className="absolute top-0 bottom-0 right-0">{ leadingButton }</div> }
        </div>
    );
}

export default Input;