import React, { ChangeEvent } from 'react'

export default function Input({
  text,
  name,
  value = '',
  placeholder,
  onchange,
}: {
  text: string
  name: string
  value?: string
  placeholder?: string
  onchange: (name: string, event: ChangeEvent<{ value: string }>) => void
}) {
  return (
    <div>
      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
        {text}
      </label>
      <div className="mt-1 flex rounded-md shadow-sm">
        <input
          type="text"
          name={name}
          className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"
          placeholder={placeholder}
          value={value}
          onChange={onchange.bind(null, name)}
        />
      </div>
    </div>
  )
}