import React from 'react'
import { Form } from 'antd'

import { FormListFieldData } from 'antd/lib/form/FormList'

import { Input } from 'components/Input'

interface SmartLinkArtistFieldProps extends FormListFieldData {
  index: number
  removeButton: React.ReactNode
}

export const SmartLinkArtistField: React.FC<SmartLinkArtistFieldProps> = ({
  name,
  removeButton,
  ...rest
}) => {
  return (
    <Form.Item
      {...rest}
      className="smart-link--artist"
      name={[name, 'name']}
      // https://ant.design/changelog#4.18.0
      // fieldKey={[key, "name"]}
      rules={[{ required: true, message: 'Artist name is required' }]}
    >
      <Input placeholder="e.g. John Doe" suffix={removeButton} />
    </Form.Item>
  )
}
