'use client';
import { useState } from "react";

const Form = <T,>({ initialData, onSubmit }) => {
  const [formData, setFormData] = useState( initialData );

  const handleSubmit = (event) => {
    event.preventDefault();

    //q = formData;

    //addQuestion( q );

    //console.log( `Adding question ${JSON.stringify(q)}` );

    onSubmit( formData );
  }

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData( (prevData) => ({
      ...prevData,
      [name]: value
    }));
  }

  return ( 
    <form onSubmit={handleSubmit} className="flex">
      <div>
        {Object.entries( initialData ).map( (key, val) => {
          return(
            <input
              type = { typeof( val ) == typeof( 0 ) ? "number" : "text" /* pretty hacky, we should change this */ } 
              id = {key[0]}
              name = {key[0]}
              value = {formData[key[0]]}
              onChange = {handleChange}
              required
            />)})}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;