import Link from "next/link";
import { PreviewNotice } from "@/components/ui";

export function AuthForm({ mode }: { mode: "login" | "register" }) {
  const isLogin = mode === "login";
  return (
    <div className="w-full max-w-md rounded-2xl border border-line bg-panel/70 p-6 sm:p-8">
      <PreviewNotice>认证服务尚未接入。当前表单仅用于检查布局，不会提交或创建账户。</PreviewNotice>
      <form className="mt-8 space-y-5">
        <div><label className="field-label" htmlFor="email">邮箱</label><input className="field-input" disabled id="email" placeholder="name@example.com" type="email" /></div>
        <div><label className="field-label" htmlFor="password">密码</label><input className="field-input" disabled id="password" placeholder="至少 8 位字符" type="password" /></div>
        {!isLogin ? <div><label className="field-label" htmlFor="password-confirm">确认密码</label><input className="field-input" disabled id="password-confirm" placeholder="再次输入密码" type="password" /></div> : null}
        <button className="button-primary w-full" disabled type="submit">{isLogin ? "登录（待接入）" : "注册（待接入）"}</button>
      </form>
      <p className="mt-6 text-center text-sm text-muted">{isLogin ? "还没有账户？" : "已有账户？"}{" "}<Link className="text-cyan hover:text-copy" href={isLogin ? "/register" : "/login"}>{isLogin ? "去注册" : "去登录"}</Link></p>
    </div>
  );
}