import { BlockContentFragment } from '../../gql'
import FormatSelector from './FormatSelector'
import { TextInput } from '../../form'

interface IBlockFormInputs {
  onChange: GenericEventHandler
  value: BlockContentFragment
  name: string
}

const BlockFormInputs = ({ onChange, value, name }: IBlockFormInputs) => {
  return (
    <fieldset>
      <TextInput
        name={`${name}.title`}
        label='Title'
        value={value.title}
        onChange={onChange}
      />
      <FormatSelector
        name={`${name}.format`}
        value={value.format}
        onChange={onChange}
      />
      <TextInput
        name={`${name}.description`}
        label='Description'
        value={value.description}
        onChange={onChange}
      />
      <TextInput
        name={`${name}.duration`}
        label='Duration'
        value={value.duration}
        type='number'
        onChange={onChange}
      />
      <TextInput
        name={`${name}.rest`}
        label='Rest'
        value={value.rest}
        type='number'
        onChange={onChange}
      />
    </fieldset>
  )
}

export default BlockFormInputs
