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

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

  return (
    <>
      <div>
        <h2 className="text-3xl font-semibold leading-[1.1] tracking-[-0.03em] text-fg">
          Welcome back.
        </h2>
        <p className="mt-2.5 text-sm leading-[1.55] text-fg-secondary max-w-[280px]">
          Sign in to pick up where you left off.
        </p>
      </div>

      <LoginForm />

      <div className="text-center text-[13px] text-fg-secondary">
        New to FluxChat?{" "}
        <button
          type="button"
          onClick={() => navigate("/register")}
          className="bg-transparent border-0 p-0 text-accent cursor-pointer hover:text-accent-hover transition-colors duration-fast font-sans text-[13px]"
        >
          Create one
        </button>
      </div>
    </>
  );
}

window.LoginRoute = LoginRoute;