import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

class Input extends Component {
  static propTypes = {
    variant: PropTypes.oneOf(['dark', 'light']),
    children: PropTypes.any,
    valid: PropTypes.bool,
    className: PropTypes.string,
  };
  static defaultProps = {
    children: null,
    variant: 'dark',
    valid: true,
    className: null,
  };

  render() {
    const { variant, valid, children, className } = this.props;
    const componentClassName = classnames('Input', {
      [`Input--${variant}`]: variant,
      [className]: className,
      'Input--invalid': !valid,
    });
    return <div className={componentClassName}>{children}</div>;
  }
}

export default Input;