import React from "react";
import { useState } from "react";
import { signupFields } from "@/components/auth/InputFields";
import Input from "./Input";
import FormAction from "./FormAction";

const fields = signupFields;
type FieldState = { [key: string]: string | boolean };
let fieldsState: FieldState = {};

fields.forEach(
  (field) => (fieldsState[field.id] = field.type === "checkbox" ? false : "")
);

export default function Signup() {
  const [signupState, setSignupState] = useState(fieldsState);

  const handleChange = (e: any) => {
    setSignupState({ ...signupState, [e.target.id]: e.target.value });
  };

  const handleSubmit = (e: any) => {
    e.preventDefault();
    console.log(signupState);
    createAccount();
  };

  const createAccount = () => {};

  return (
    <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
      <div>
        {fields.map((field) => (
          <Input
            key={field.id}
            handleChange={handleChange}
            value={signupState[field.id]}
            labelText={field.labelText}
            labelFor={field.labelFor}
            id={field.id}
            name={field.name}
            type={field.type}
            isRequired={field.isRequired}
            placeholder={field.placeholder}
          />
        ))}

            <FormAction handleSubmit={handleSubmit} text="Signup" />

      </div>
    </form>
  );
}