import React, { useCallback } from 'react'
import { Form } from 'antd'
import Field from './Field'

export default (props) => {
  const { label, name, value, config } = props

  const fieldProps = {
    value,
    ...config,
  }

  const handleChange = useCallback((data) => {
    props.onChange({[name]: data})
  }, [name, props.onChange])

  return (
    <Form.Item label={label}>
      <Field
        {...fieldProps}
        value={value}
        onChange={handleChange}
      />
    </Form.Item>
  )
}
