import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";

import logo from "$/logo.png";

const width = logo.width;
const height = logo.height;

const ratio = width / height;

export default function UnauthenticatedLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  async function redirect_login() {
    "use server";
    redirect("/unauthenticated/login");
  }

  return (
    <>
      <nav>
        <Link href={"/"}>
          <Image
            src={logo}
            height={32}
            width={32 * ratio}
            alt="MealMate Logo"
            className="mr-2"
          />
        </Link>
        <span className="font-[georgia]">MealMate</span>
        <i
          className="text-2xl text-[#6a4bc3] hover:text-[#5a3bb3] fas fa-sign-in"
          onClick={redirect_login}
        />
      </nav>
      <div className="text-center p-5">{children}</div>
    </>
  );
}

Is there a better way to do this redirect on click than a server action? It feels wasteful to need to talk to the server just for a simple redirect