"use client";

import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import { RequireKind } from "@/lib/session";
import { AppBar, type NavLink } from "@/components/AppBar";

/*
 * Three destinations, not five. Settings moved into the account menu it is
 * your password, not a place and Instances went with it, because Overview
 * already lists them and a second door to the same room is just a second thing
 * to keep in sync. Linking an install is an action, so it is a button on
 * Overview rather than a permanent nav entry.
 */
const LINKS: NavLink[] = [
    { href: "/", label: "Overview" },
    { href: "/users", label: "People" },
    { href: "/billing", label: "Billing" },
];

function AccountName() {
    // Shares the ["account"] key with Overview, so this costs no extra request.
    const { data } = useQuery({ queryKey: ["account"], queryFn: api.account });
    if (!data) return null;
    return <span className="block truncate text-[0.92rem] font-bold tracking-[-0.01em]">{data.account.name}</span>;
}

export default function CustomerLayout({ children }: { children: React.ReactNode }) {
    return (
        <RequireKind kind="customer">
            <AppBar links={LINKS} context={<AccountName />} />
            <main className="mx-auto max-w-rail px-5 py-7">{children}</main>
        </RequireKind>
    );
}
