import Form from "next/form";

import { Input } from "./ui/input";
import { Label } from "./ui/label";

export function AuthForm({
  action,
  children,
  defaultEmail = "",
  className = "",
  showConfirmPassword = false,
  onEmailChange,
}: {
  action: NonNullable<
    string | ((formData: FormData) => void | Promise<void>) | undefined
  >;
  children: React.ReactNode;
  defaultEmail?: string;
  className?: string;
  showConfirmPassword?: boolean;
  onEmailChange?: (email: string) => void;
}) {
  return (
    <Form action={action} className={`flex flex-col gap-4 px-4 sm:px-16 ${className}`}>
      <div className="flex flex-col gap-2">
        <Label
          className="font-normal text-zinc-600 dark:text-zinc-400"
          htmlFor="email"
        >
          邮箱地址
        </Label>

        <Input
          autoComplete="email"
          autoFocus
          className="bg-muted text-md md:text-sm"
          defaultValue={defaultEmail}
          id="email"
          name="email"
          onChange={(event) => onEmailChange?.(event.target.value)}
          placeholder="user@example.com"
          required
          type="email"
        />
      </div>

      <div className="flex flex-col gap-2">
        <Label
          className="font-normal text-zinc-600 dark:text-zinc-400"
          htmlFor="password"
        >
          登录密码
        </Label>

        <Input
          className="bg-muted text-md md:text-sm"
          id="password"
          name="password"
          required
          type="password"
        />
      </div>

      {showConfirmPassword ? (
        <div className="flex flex-col gap-2">
          <Label
            className="font-normal text-zinc-600 dark:text-zinc-400"
            htmlFor="confirmPassword"
          >
            确认密码
          </Label>

          <Input
            className="bg-muted text-md md:text-sm"
            id="confirmPassword"
            name="confirmPassword"
            required
            type="password"
          />
        </div>
      ) : null}

      {children}
    </Form>
  );
}