"use client";

import { useActionState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { loginAction, registerAction } from "@/app/actions";

export function AuthForm({ mode }: { mode: "login" | "register" }) {
  const t = useTranslations("auth");
  const locale = useLocale();
  const action = mode === "login" ? loginAction : registerAction;
  const [state, formAction, pending] = useActionState(action, null);

  return (
    <div className="card mx-auto max-w-md p-6 sm:p-8">
      <h1 className="text-2xl font-bold">
        {mode === "login" ? t("loginTitle") : t("registerTitle")}
      </h1>
      <form action={formAction} className="mt-6 space-y-4">
        <input type="hidden" name="locale" value={locale} />
        {mode === "register" ? (
          <label className="block text-sm">
            {t("name")}
            <input
              name="name"
              required
              className="field mt-1"
            />
          </label>
        ) : null}
        <label className="block text-sm">
          {t("email")}
          <input
            name="email"
            type="email"
            required
            className="field mt-1"
          />
        </label>
        <label className="block text-sm">
          {t("password")}
          <input
            name="password"
            type="password"
            required
            minLength={mode === "register" ? 8 : 1}
            className="field mt-1"
          />
        </label>
        {state?.error ? (
          <p className="text-sm text-red-700">{t(state.error)}</p>
        ) : null}
        <button
          disabled={pending}
          className="btn-primary w-full"
        >
          {mode === "login" ? t("submitLogin") : t("submitRegister")}
        </button>
      </form>
      <p className="mt-4 text-sm text-muted">
        {mode === "login" ? t("toRegister") : t("toLogin")}{" "}
        <Link className="text-brand" href={mode === "login" ? "/register" : "/login"}>
          {mode === "login" ? t("submitRegister") : t("submitLogin")}
        </Link>
      </p>
    </div>
  );
}