import { Link } from "@tanstack/react-router";
import { useReturnSearch } from "~/hooks/use-sign-in-href";
import { buttonClass } from "~/ui/Button";
import { Panel } from "~/ui/Panel";

/**
 * Shown in place of a form a signed-out visitor can't use, so the page explains what's needed instead of
 * offering a control that would fail. Both links bring the visitor back here afterwards.
 */
export function SignInPrompt({ action, returnTo }: { action: string; returnTo?: string }) {
  const search = useReturnSearch(returnTo);
  return (
    <Panel padding="md">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <p className="text-sm text-kumo-default">Sign in to {action}.</p>
        <div className="flex gap-2">
          <Link to="/signup" search={search} className={buttonClass("secondary", "sm")}>
            Create account
          </Link>
          <Link to="/login" search={search} className={buttonClass("primary", "sm")}>
            Sign in
          </Link>
        </div>
      </div>
    </Panel>
  );
}

/** An action-shaped link that sends signed-out visitors to sign in first and back to `to` (default: here). */
export function SignInLink({
  to,
  label,
  variant = "primary",
}: {
  to?: string;
  label: string;
  variant?: "primary" | "secondary";
}) {
  const search = useReturnSearch(to);
  return (
    <Link to="/login" search={search} title="Sign in to continue" className={buttonClass(variant, "sm")}>
      {label}
    </Link>
  );
}