import { useNavigate } from "react-router-dom";

function RegisterRoute() {
  const navigate = useNavigate();

  return (
    <>
      <div>
        <h2 className="text-3xl font-semibold leading-[1.1] tracking-[-0.03em] text-fg">
          Create your account.
        </h2>
        <p className="mt-2.5 text-sm leading-[1.55] text-fg-secondary max-w-[280px]">
          Real-time chat for teams that ship. No noise, no nonsense.
        </p>
      </div>

      <RegisterForm />

      <div className="text-center text-[13px] text-fg-secondary">
        Already have an account?{" "}
        <button
          type="button"
          onClick={() => navigate("/login")}
          className="bg-transparent border-0 p-0 text-accent cursor-pointer hover:text-accent-hover transition-colors duration-fast font-sans text-[13px]"
        >
          Sign in
        </button>
      </div>
    </>
  );
}

window.RegisterRoute = RegisterRoute;