import { LogOut } from "lucide-react";
import { NavLink, Outlet } from "react-router-dom";

import { useAuth } from "@/auth/AuthProvider";
import { landingTheme } from "@/theme";
import { landingThemeVars } from "@/theme-vars";

export function LandingShell() {
  const { logout, user } = useAuth();

  return (
    <div className="min-h-screen bg-[var(--landing-bg)] text-[var(--landing-text)]" style={landingThemeVars(landingTheme)}>
      <header className="mx-auto flex max-w-6xl items-center justify-between px-6 py-6">
        <div className="text-[20px] font-black tracking-[0.18em]">PRODUCT</div>
        <div className="flex items-center gap-3">
          <NavLink className="rounded-full border border-[#d8cabb] px-4 py-2 text-sm font-semibold" to="/workspace">
            Workspace
          </NavLink>
          <div className="hidden rounded-full bg-white px-4 py-2 text-sm font-semibold text-[#2c261f] md:block">{user?.name ?? user?.email}</div>
          <button
            className="inline-flex items-center gap-2 rounded-full bg-[#2c261f] px-4 py-2 text-sm font-semibold text-white"
            onClick={logout}
          >
            <LogOut className="h-4 w-4" />
            Log out
          </button>
        </div>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}
