Auth Split

"use client";

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

export interface AuthSplitProps {
  title?: string;
  subtitle?: string;
  perks?: string[];
  onSubmit?: (v: { name: string; email: string }) => void | Promise<void>;
  className?: string;
}

/** Sign-up split: a lavender panel with a flat illustration of floating task cards and perks on one side, a roomy name + email form on the other. */
export function AuthSplit({
  title = "Create your free account",
  subtitle = "Free forever for teams up to 5. No credit card.",
  perks = ["Unlimited tasks", "Weekly planner", "Friendly reminders"],
  onSubmit,
  className,
}: AuthSplitProps) {
  const id = useId();
  const [done, setDone] = useState("");
  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const d = new FormData(e.currentTarget);
    await onSubmit?.({ name: String(d.get("name")), email: String(d.get("email")) });
    setDone(String(d.get("email")));
  };
  const field = "da-focus h-12 w-full rounded-da-md bg-da-surface-2 px-4 text-[15px] placeholder:text-da-muted-fg focus:bg-da-input";

  return (
    <div className={cn("grid min-h-dvh bg-da-bg text-da-fg lg:grid-cols-2", className)}>
      <aside className="relative hidden overflow-hidden bg-da-primary/12 p-12 lg:flex lg:flex-col lg:justify-center">
        <div aria-hidden className="relative mx-auto h-72 w-full max-w-sm">
          <div className="absolute top-0 left-4 w-60 -rotate-6 rounded-da-lg bg-da-surface p-4 shadow-da-md">
            <p className="text-xs font-semibold text-da-muted-fg">Today</p>
            <p className="mt-1 font-da-display font-extrabold">Plan team retreat 🏕️</p>
          </div>
          <div className="absolute top-24 right-0 w-56 rotate-3 rounded-da-lg bg-da-accent p-4 text-da-accent-fg shadow-da-md">
            <p className="font-da-display font-extrabold">Write newsletter ✍️</p>
            <p className="text-xs">Due Thursday</p>
          </div>
          <div className="absolute bottom-0 left-10 flex w-52 items-center gap-2 rounded-da-lg bg-da-secondary p-4 text-da-secondary-fg shadow-da-md">
            <span className="grid size-6 place-items-center rounded-full bg-da-secondary-fg text-da-secondary">
              <Check className="size-3.5" strokeWidth={3} />
            </span>
            <span className="font-semibold">Book venue</span>
          </div>
        </div>
        <ul className="mx-auto mt-10 space-y-2">
          {perks.map((p) => (
            <li key={p} className="flex items-center gap-2 font-semibold">
              <span aria-hidden className="grid size-6 place-items-center rounded-full bg-da-surface">
                <Check className="size-3.5 text-da-primary" strokeWidth={3} />
              </span>
              {p}
            </li>
          ))}
        </ul>
      </aside>
      <main className="flex items-center justify-center px-6 py-12">
        <div className="w-full max-w-sm">
          <h1 className="font-da-display text-3xl font-extrabold tracking-da-display">{title}</h1>
          <p className="mt-2 text-da-muted-fg">{subtitle}</p>
          {done ? (
            <p role="status" className="mt-8 rounded-da-lg bg-da-secondary p-5 text-da-secondary-fg">
              <span className="font-da-display text-lg font-extrabold">Almost there! 💌</span>
              <span className="mt-1 block">We sent a confirmation link to {done}.</span>
            </p>
          ) : (
            <form onSubmit={submit} className="mt-8 grid gap-4">
              <div className="grid gap-1.5">
                <label htmlFor={`${id}-n`} className="text-sm font-semibold">
                  Your name
                </label>
                <input id={`${id}-n`} name="name" required autoComplete="name" placeholder="Ana Souza" className={field} />
              </div>
              <div className="grid gap-1.5">
                <label htmlFor={`${id}-e`} className="text-sm font-semibold">
                  Work email
                </label>
                <input id={`${id}-e`} name="email" type="email" required autoComplete="email" placeholder="ana@bright.co" className={field} />
              </div>
              <button
                type="submit"
                className="da-focus da-transition mt-2 h-12 rounded-da-pill bg-da-primary font-semibold text-da-primary-fg shadow-da-sm hover:-translate-y-0.5"
              >
                Create account
              </button>
              <p className="text-center text-xs text-da-muted-fg">
                By signing up you agree to our{" "}
                <a href="#terms" className="da-focus rounded-da-sm underline">
                  Terms
                </a>
                .
              </p>
            </form>
          )}
        </div>
      </main>
    </div>
  );
}

export default AuthSplit;