import { TextInput } from '../../form'
import { TExercise } from '../types'
import ExerciseSelector from './ExerciseSelector'

interface IExerciseInputs {
  onChange: GenericEventHandler
  value: TExercise
  name: string
}

const ExerciseInputs = ({ onChange, value, name }: IExerciseInputs) => {
  return (
    <>
      <p>ex: {value.id}</p>
      <ExerciseSelector
        name={name}
        value={value}
        label='Existing exercise'
        onChange={onChange}
      />
      <TextInput
        name={`${name}.name`}
        label='Name'
        value={value.name}
        onChange={onChange}
      />
      <TextInput
        name={`${name}.description`}
        label='Description'
        value={value.description}
        onChange={onChange}
      />
    </>
  )
}

export default ExerciseInputs
