import React from "react";
import { Input as BaseInput } from "baseui/input";

export interface InputProps {
  value: any;
  onChange: (e: any) => void;
  overrides?: any;
  size?: any;
  placeholder?: string;
  clearable?: boolean;
  startEnhancer?: string;
  endEnhancer?: string;
}

/**
 * This is the `<Input>` component <br />
 * Use this to gather text data from the user
 */
const Input: React.FC<InputProps> = (props) => {
  return (
    <BaseInput
      {...props}
      overrides={{
        Root: {
          style: () => ({
            borderRadius: "4px",
            borderColor: "#b3b5bd",
          }),
        },
        Input: {
          style: ({ $theme }) => ({
            backgroundColor: $theme.colors.white,
          }),
        },
      }}
    />
  );
};

export default Input;