import type { ReactNode } from "react";
import { Link } from "@tanstack/react-router";
import { BrandMark } from "@/components/AppShell";

export function AuthLayout({
  title,
  subtitle,
  children,
  footer,
}: {
  title: string;
  subtitle?: string;
  children: ReactNode;
  footer?: ReactNode;
}) {
  return (
    <div className="flex min-h-screen flex-col justify-center bg-soft px-5 py-10">
      <div className="mx-auto w-full max-w-sm rounded-3xl border border-border/60 bg-card p-6 shadow-float">
        <div className="text-center">
          <BrandMark className="mx-auto h-14 w-14" />
          <h1 className="mt-3 text-xl font-bold">{title}</h1>
          {subtitle ? <p className="mt-1 text-xs text-muted-foreground">{subtitle}</p> : null}
        </div>
        {children}
        <div className="mt-4 space-y-2 text-center text-xs text-muted-foreground">
          {footer}
          <p>
            <Link to="/auth" className="underline">
              Choose a different account type
            </Link>
          </p>
          <p>
            <Link to="/" className="underline">
              Back to home
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}

export function Field({
  label,
  value,
  onChange,
  type = "text",
  required,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  type?: string;
  required?: boolean;
}) {
  return (
    <label className="block text-left">
      <span className="text-xs font-medium text-muted-foreground">{label}</span>
      <input
        className="mt-1 w-full rounded-xl border border-input bg-background px-3 py-2.5 text-sm outline-none focus:border-primary"
        value={value}
        type={type}
        required={required}
        onChange={(e) => onChange(e.target.value)}
      />
    </label>
  );
}

export const submitClass =
  "w-full rounded-2xl bg-brand py-3.5 text-sm font-semibold text-primary-foreground shadow-card disabled:opacity-60";