import React from 'react'

import InputWrapper from './inputWrapper'

type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  label: string
}

export default function Input(props: InputProps) {
  const {
    label,
    name,
    required,
    type = 'text',
    className = '',
    ...rest
  } = props

  const defaultClasses =
    'appearance-none bg-gray-50 text-gray-500 border rounded py-2 px-3 mb-3 leading-tight disabled:bg-gray-200 disabled:cursor-not-allowed focus: outline-none focus:bg-white w-full'
  const classes = `${defaultClasses} ${className}`

  return (
    <InputWrapper label={label} name={name} required={required}>
      <input
        type={type}
        required={required}
        className={classes}
        id={name}
        name={name}
        {...rest}
      />
    </InputWrapper>
  )
}