Auth Glow

import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuthGlowProps {
  brand?: string;
  title?: string;
  description?: string;
  action?: string;
  providers?: ("google" | "github")[];
  footer?: { text: string; linkLabel: string; href: string };
  className?: string;
}

function ProviderIcon({ provider }: { provider: "google" | "github" }) {
  // Brand marks keep their official colors (decorative data).
  return provider === "google" ? (
    <svg aria-hidden viewBox="0 0 24 24" className="size-4">
      <path fill="#4285F4" d="M22.5 12.3c0-.8-.1-1.5-.2-2.2H12v4.2h5.9a5 5 0 0 1-2.2 3.3v2.7h3.6c2-1.9 3.2-4.7 3.2-8z" />
      <path fill="#34A853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.6-2.7c-1 .7-2.2 1.1-3.7 1.1-2.9 0-5.3-1.9-6.2-4.5H2.1v2.8A11 11 0 0 0 12 23z" />
      <path fill="#FBBC05" d="M5.8 14.2a6.6 6.6 0 0 1 0-4.3V7.1H2.1a11 11 0 0 0 0 9.9z" />
      <path fill="#EA4335" d="M12 5.4c1.6 0 3.1.6 4.2 1.7l3.2-3.2A11 11 0 0 0 2.1 7.1l3.7 2.8C6.7 7.3 9.1 5.4 12 5.4z" />
    </svg>
  ) : (
    <svg aria-hidden viewBox="0 0 24 24" className="size-4 fill-current">
      <path d="M12 1.5a10.5 10.5 0 0 0-3.3 20.5c.5.1.7-.2.7-.5v-1.8c-2.9.6-3.5-1.4-3.5-1.4-.5-1.2-1.2-1.5-1.2-1.5-1-.7 0-.7 0-.7 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.5 1.1 3.1.9.1-.7.4-1.1.7-1.4-2.3-.3-4.8-1.2-4.8-5.2 0-1.1.4-2 1.1-2.8-.1-.3-.5-1.4.1-2.8 0 0 .9-.3 2.9 1.1a10 10 0 0 1 5.2 0c2-1.4 2.9-1.1 2.9-1.1.6 1.4.2 2.5.1 2.8.7.8 1.1 1.7 1.1 2.8 0 4-2.5 4.9-4.8 5.2.4.3.7 1 .7 1.9v2.9c0 .3.2.6.7.5A10.5 10.5 0 0 0 12 1.5z" />
    </svg>
  );
}

/** Centered sign-in on the dark canvas: glowing brand mark, social providers, email + magic-link form, all floating over the Nocturne glow. */
export function AuthGlow({
  brand = "Nova",
  title = "Welcome back",
  description = "Sign in to pick up your conversations where you left them.",
  action = "#magic-link",
  providers = ["google", "github"],
  footer = { text: "New to Nova?", linkLabel: "Create an account", href: "#signup" },
  className,
}: AuthGlowProps) {
  return (
    <main className={cn("relative isolate grid min-h-dvh place-items-center overflow-hidden px-4 py-12", className)}>
      <div aria-hidden className="absolute inset-x-0 bottom-0 -z-10 h-2/3 bg-(image:--nocturne-glow)" />
      <div className="w-full max-w-sm">
        <div className="flex flex-col items-center text-center">
          <span role="img" aria-label={brand} className="grid size-12 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent shadow-[0_0_48px_-8px_var(--da-primary)]">
            <span className="size-4 rounded-full bg-da-bg" />
          </span>
          <h1 className="mt-6 font-da-display text-2xl font-semibold tracking-da-display">{title}</h1>
          <p className="mt-2 text-sm text-da-muted-fg">{description}</p>
        </div>

        <div className="da-stroke mt-8 rounded-da-lg bg-da-surface p-5 shadow-da-lg">
          <div className="grid gap-2">
            {providers.map((p) => (
              <a
                key={p}
                href={`#oauth-${p}`}
                className="da-focus da-transition da-stroke flex h-11 items-center justify-center gap-2.5 rounded-da-pill bg-da-surface-2 text-sm font-medium hover:border-da-border-strong"
              >
                <ProviderIcon provider={p} />
                Continue with {p === "google" ? "Google" : "GitHub"}
              </a>
            ))}
          </div>
          <div className="my-5 flex items-center gap-3 text-xs text-da-muted-fg">
            <span className="h-px flex-1 bg-da-border" />
            or
            <span className="h-px flex-1 bg-da-border" />
          </div>
          <form action={action} className="grid gap-3">
            <label className="grid gap-1.5 text-sm">
              <span className="font-medium">Work email</span>
              <input
                type="email"
                name="email"
                required
                autoComplete="email"
                placeholder="chloe@parcel.app"
                className="da-focus da-stroke h-11 rounded-da-md bg-da-input px-3.5 text-[15px] text-da-fg outline-none placeholder:text-da-muted-fg focus:border-da-border-strong"
              />
            </label>
            <button type="submit" className="da-focus da-transition inline-flex h-11 items-center justify-center gap-2 rounded-da-pill bg-da-fg text-sm font-semibold text-da-bg hover:bg-da-fg/90">
              Email me a sign-in link
              <ArrowRight aria-hidden className="size-4" />
            </button>
          </form>
        </div>

        <p className="mt-6 text-center text-sm text-da-muted-fg">
          {footer.text}{" "}
          <a href={footer.href} className="da-focus rounded-da-sm font-medium text-da-primary hover:underline">
            {footer.linkLabel}
          </a>
        </p>
      </div>
    </main>
  );
}

export default AuthGlow;