import React from 'react'
import { FormControl, FormLabel, Input } from '@chakra-ui/react'
import { Data } from '../../models/game'

interface Props {
  label: string
  textField: string
  field: string
  bg: string
  handleInputChange: <G extends keyof Data>(name: string, value: Data[G]) => void
  required: boolean
}

const SingleFieldInput = ({ label, textField, field, bg, handleInputChange, required }: Props) => {

  return (
    <FormControl mb="3">
      <FormLabel>{label}</FormLabel>
      <Input
        id={textField}
        name={textField}
        bg={bg}
        type="text"
        border="1px"
        borderColor="gray.500"
        rounded="md"
        value={field}
        required={required}
        onChange={(e) => {
          handleInputChange(textField, e.target.value)
        }}
      />
    </FormControl>
  )
}

export default SingleFieldInput