Auth Centered

"use client";

import { useId, type FormEvent } from "react";
import { cn } from "@/lib/utils";

export interface AuthCenteredProps {
  brand?: string;
  brandHref?: string;
  onSubmit?: (data: { email: string; password: string }) => void;
  className?: string;
}

function FrameMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className={cn("size-6 shrink-0", className)}>
      <rect x="1" y="1" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M7 1v22M1 7h22" stroke="currentColor" strokeWidth="2" />
      <rect x="15" y="15" width="4" height="4" fill="var(--da-accent)" />
    </svg>
  );
}

/** Minimal centered sign-in with lots of air: logo, small title, two hairline-boxed fields stacked edge to edge, ink button, “or continue with” text links and a mono legal line at the very bottom. */
export function AuthCentered({ brand = "Frame", brandHref = "/", onSubmit, className }: AuthCenteredProps) {
  const id = useId();
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const f = new FormData(e.currentTarget);
    onSubmit?.({ email: String(f.get("email")), password: String(f.get("password")) });
  };
  return (
    <main className={cn("flex min-h-dvh flex-col bg-da-bg px-4 text-da-fg", className)}>
      <div className="mx-auto my-auto w-full max-w-xs py-16">
        <a href={brandHref} aria-label={`${brand} home`} className="da-focus inline-block rounded-da-sm">
          <FrameMark className="size-8" />
        </a>
        <h1 className="mt-10 text-xl font-medium">Log in to {brand}</h1>
        <form onSubmit={submit} className="mt-6">
          <div className="border border-da-border focus-within:border-da-border-strong">
            <label htmlFor={`${id}-e`} className="sr-only">
              Email
            </label>
            <input
              id={`${id}-e`}
              name="email"
              type="email"
              required
              autoComplete="email"
              placeholder="Email"
              className="h-12 w-full border-b border-da-border bg-transparent px-3 outline-none placeholder:text-da-muted-fg focus:bg-da-surface-2"
            />
            <label htmlFor={`${id}-p`} className="sr-only">
              Password
            </label>
            <input
              id={`${id}-p`}
              name="password"
              type="password"
              required
              autoComplete="current-password"
              placeholder="Password"
              className="h-12 w-full bg-transparent px-3 outline-none placeholder:text-da-muted-fg focus:bg-da-surface-2"
            />
          </div>
          <button type="submit" className="da-focus mt-3 h-12 w-full rounded-da-sm bg-da-primary font-medium text-da-primary-fg hover:opacity-85">
            Continue
          </button>
        </form>
        <p className="mt-6 flex gap-4 text-sm text-da-muted-fg">
          <span>Or:</span>
          <a href="#google" className="da-focus rounded-da-sm text-da-fg hover:underline">
            Google
          </a>
          <a href="#sso" className="da-focus rounded-da-sm text-da-fg hover:underline">
            SSO
          </a>
          <a href="#magic" className="da-focus rounded-da-sm text-da-fg hover:underline">
            Email link
          </a>
        </p>
      </div>
      <p className="pb-6 text-center font-da-mono text-[10px] tracking-da-label text-da-muted-fg uppercase">© 2026 {brand} · Privacy · Terms</p>
    </main>
  );
}

export default AuthCentered;