import PropTypes from 'prop-types'

/**
 * Primary UI component for user interaction
 */
export const TextInputBasic = ({ label, placeholder }) => {
  return (
    <div className={''}>
      <p className={'font-sans uppercase text-palette-300 text-inputLabel mb-textInputLabelBottom'}>{label}</p>
      <input
        placeholder={placeholder}
        className={
          'w-full bg-palette-100 h-textInput px-textInputBasicX focus:outline-none bg-transparent ' +
          'placeholder-palette-400 text-content tracking-inputPlaceholder text-textInput'
        }
      />
    </div>
  )
}

TextInputBasic.propTypes = {
  /**
   * Icon to place in text input
   */
  label: PropTypes.string,
  /**
   * Input placeholder
   */
  placeholder: PropTypes.string,
}