import { Link, Outlet } from "react-router-dom";
import { Toaster } from "@/components/ui/toaster";
import { SideNav } from "./SideNav";
import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
import { Logo } from "@/components/Logo";
import { ThemeToggle } from "@/components/ThemeSwitch";

function RootLayout() {
  return (
    <>
      <div className="w-full h-full px-4">
        <aside className="fixed w-72 px-6 shrink-0 min-h-screen">
          <Link
            to="https://skyvern.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            <div className="h-24">
              <Logo />
            </div>
          </Link>
          <SideNav />
        </aside>
        <div className="pl-72 h-24 flex justify-end items-center px-6 gap-4">
          <Link
            to="https://discord.com/invite/fG2XXEuQX3"
            target="_blank"
            rel="noopener noreferrer"
          >
            <DiscordLogoIcon className="w-6 h-6" />
          </Link>
          <Link
            to="https://github.com/Skyvern-AI/skyvern"
            target="_blank"
            rel="noopener noreferrer"
          >
            <GitHubLogoIcon className="w-6 h-6" />
          </Link>
          <ThemeToggle />
        </div>
        <main className="pl-72">
          <Outlet />
        </main>
      </div>
      <Toaster />
    </>
  );
}

export { RootLayout };