import { Link } from "@tanstack/react-router";
import { VERIFY_EMAIL_PATH } from "~/lib/email-verification";
import { cn } from "~/utils/cn";

/** Why a write control is hidden or disabled for an unverified account, with the way to fix it. */
export function VerifyEmailHint({ action, className }: { action: string; className?: string }) {
  return (
    <p className={cn("text-xs text-amber-300", className)}>
      Verify your email address to {action}.{" "}
      <Link to={VERIFY_EMAIL_PATH} className="underline underline-offset-2 hover:text-amber-200">
        Resend the verification email
      </Link>
    </p>
  );
}