import React from "react"
import PropTypes from "prop-types"
import Label from "../label"
import Textarea from "../textarea"
import Stack from "../stack"
import InlineValidation from "../inline-validation"
import { useField } from "../../hooks/use-form"

export default function TextareaField({
  id,
  name,
  label,
  value,
  autoFocus,
  onChange,
  rows = 4,
  ...props
}) {
  const field = useField({ id, name, value, onChange })

  return (
    <Stack spacing={2}>
      <Label htmlFor={field.id}>{label}</Label>
      <Textarea
        id={field.id}
        autoFocus={autoFocus}
        name={name}
        value={field.value}
        onBlur={field.onBlur}
        onChange={field.onChange}
        rows={rows}
        {...props}
      />
      <InlineValidation name={name} />
    </Stack>
  )
}

TextareaField.propTypes = {
  id: PropTypes.number,
  name: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.string,
  autoFocus: PropTypes.bool,
  onChange: PropTypes.func,
  rows: PropTypes.number,
}
