Auth Screen

"use client";

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

export interface AuthScreenProps {
  brand?: string;
  brandHref?: string;
  statement?: 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>
  );
}

/** Split sign-in: the left half is an ink panel with a large statement and mono footer; the right half holds a minimal underline form (email, password), an ink button and text links. Panel hides on mobile. */
export function AuthScreen({ brand = "Frame", brandHref = "/", statement = "Your work, framed.", onSubmit, className }: AuthScreenProps) {
  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")) });
  };
  const field = "h-11 w-full border-b border-da-border-strong/40 bg-transparent text-lg outline-none focus:border-da-fg focus:shadow-[0_1px_0_0_var(--da-fg)]";
  const label = "font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase";
  return (
    <main className={cn("grid min-h-dvh bg-da-bg text-da-fg lg:grid-cols-2", className)}>
      <aside className="hidden flex-col justify-between bg-da-fg p-10 text-da-bg lg:flex">
        <span className="font-da-display text-lg font-semibold tracking-da-display">{brand}</span>
        <p className="font-da-display text-[clamp(3rem,6vw,6rem)] leading-[0.9] font-medium tracking-da-display">{statement}</p>
        <p className="font-da-mono text-[11px] tracking-da-label uppercase opacity-70">3,400 studios · Amsterdam</p>
      </aside>
      <div className="flex flex-col px-6 py-8 sm:px-12">
        <a
          href={brandHref}
          className="da-focus flex w-fit items-center gap-2.5 rounded-da-sm font-da-display text-lg font-semibold tracking-da-display lg:hidden"
        >
          <FrameMark />
          {brand}
        </a>
        <div className="mx-auto my-auto w-full max-w-sm py-12">
          <h1 className="font-da-display text-4xl font-medium tracking-da-display">Log in</h1>
          <form onSubmit={submit} className="mt-10 grid gap-7">
            <div className="grid gap-1">
              <label htmlFor={`${id}-e`} className={label}>
                Email
              </label>
              <input id={`${id}-e`} name="email" type="email" required autoComplete="email" className={field} />
            </div>
            <div className="grid gap-1">
              <div className="flex justify-between">
                <label htmlFor={`${id}-p`} className={label}>
                  Password
                </label>
                <a href="#forgot" className="da-focus rounded-da-sm font-da-mono text-[11px] tracking-da-label uppercase hover:underline">
                  Forgot?
                </a>
              </div>
              <input id={`${id}-p`} name="password" type="password" required autoComplete="current-password" className={field} />
            </div>
            <button type="submit" className="da-focus mt-2 h-12 rounded-da-sm bg-da-primary font-medium text-da-primary-fg hover:opacity-85">
              Log in
            </button>
          </form>
          <p className="mt-8 text-sm text-da-muted-fg">
            New to {brand}?{" "}
            <a href="#signup" className="da-focus rounded-da-sm text-da-fg underline decoration-da-accent decoration-2 underline-offset-4">
              Create an account
            </a>
          </p>
        </div>
      </div>
    </main>
  );
}

export default AuthScreen;