import { ChangeEvent, FC, FormEvent, useState } from "react";

interface FormState {
  email: string;
  name: string;
  password: string;
}

const fields: {
  id: keyof FormState;
  label: string;
  placeholder: string;
  type: string;
}[] = [
  {
    id: "name",
    label: "Full Name",
    placeholder: "Full Name",
    type: "text",
  },
  {
    id: "email",
    label: "Email Address",
    placeholder: "Email Address",
    type: "email",
  },
  {
    id: "password",
    label: "Password",
    placeholder: "Password",
    type: "password",
  },
];

const App: FC<{ onSubmit?: (data: FormState) => void }> = ({ onSubmit }) => {
  const [formState, setFormState] = useState<FormState>({
    email: "",
    name: "",
    password: "",
  });

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSubmit?.(formState);
  };

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { value, name } = event.target;
    setFormState((prev) => ({ ...prev, [name]: value }));
  };

  return (
    <div className="min-h-screen bg-[#A7D7C5] p-6">
      <div className="bg-white p-12 rounded-3xl shadow-lg flex flex-col items-center text-center w-full max-w-[30rem] mx-auto">
        <h2 className="text-3xl font-bold mb-2 text-[#32403B]">
          Create An Account
        </h2>
        <p className="mb-8 text-gray-600 max-w-80">
          Create an account to enjoy all the services without any ads for free!
        </p>
        <form onSubmit={handleSubmit} className="w-full flex flex-col gap-5">
          {fields.map(({ id, type, label, placeholder }) => (
            <div key={id}>
              <label
                htmlFor={id}
                className="block text-gray-700 text-sm font-bold mb-2 sr-only"
              >
                {label}
              </label>
              <input
                className="appearance-none border rounded-lg w-full py-4 px-5 text-gray-700 leading-tight focus:outline-none focus:border-[#84C7AE] transition-colors duration-300"
                id={id}
                onChange={handleChange}
                placeholder={placeholder}
                required
                type={type}
                value={formState[id]}
              />
            </div>
          ))}
          <div className="flex flex-col items-center justify-between gap-4">
            <button
              className="bg-[#84C7AE] hover:opacity-100 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:shadow-outline opacity-90 transition-opacity duration-300 text-lg"
              type="submit"
            >
              Create Account
            </button>
            <div className="text-sm text-[#32403B]">
              Already Have An Account?{" "}
              <a
                className="hover:text-[#84C7AE] transition-colors duration-300 underline"
                href="/"
                onClick={(e) => e.preventDefault()}
              >
                Sign In
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
};

export default App;