import React, { ChangeEvent } from 'react'

export default function TextAreaInput({
  text,
  name,
  placeholder,
  onchange,
  value,
  styles = '',
}: {
  text: string
  name: string
  placeholder: string
  onchange: (name: string, event: ChangeEvent<{ value: string }>) => void
  value: string
  styles?: string
}) {
  return (
    <div>
      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
        {text}
      </label>
      <div className="mt-1">
        <textarea
          id="about"
          name="about"
          rows={10}
          className={`shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md ${styles}`}
          placeholder={placeholder}
          onChange={onchange.bind(null, name)}
          value={value}
        ></textarea>
      </div>
    </div>
  )
}