"use client";
import { useActionState } from "react";
import { customerLogin, customerRegister } from "@/app/(store)/actions";

export default function AuthForm({ mode, next }: { mode: "login" | "register"; next?: string }) {
  const [state, action, pending] = useActionState(mode === "login" ? customerLogin : customerRegister, null);
  const e = (k: string) => state?.errors?.[k];
  return (
    <form action={action} className="space-y-5">
      {next && <input type="hidden" name="next" value={next} />}
      {mode === "register" && <div><label htmlFor="name" className="label">Full name</label><input id="name" name="name" required autoComplete="name" className="field" />{e("name") && <p className="text-rose text-[13px] mt-1">{e("name")}</p>}</div>}
      <div><label htmlFor="email" className="label">Email</label><input id="email" name="email" type="email" required autoComplete="email" className="field" />{e("email") && <p className="text-rose text-[13px] mt-1">{e("email")}</p>}</div>
      {mode === "register" && <div><label htmlFor="phone" className="label">Mobile number (optional)</label><input id="phone" name="phone" inputMode="tel" autoComplete="tel" className="field" /></div>}
      <div><label htmlFor="password" className="label">Password</label><input id="password" name="password" type="password" required autoComplete={mode === "login" ? "current-password" : "new-password"} className="field" />{e("password") && <p className="text-rose text-[13px] mt-1">{e("password")}</p>}{mode === "register" && !e("password") && <p className="text-[12px] text-stone mt-1">At least 10 characters, with letters and a number.</p>}</div>
      {state?.message && <p role="alert" className="text-rose text-[14px]">{state.message}</p>}
      <button className="btn-solid w-full" disabled={pending}>{pending ? "Please wait…" : mode === "login" ? "Sign in" : "Create account"}</button>
    </form>
  );
}