import { SettingsNav } from "@/components/settings-nav";
import { KeyIcon, PersonIcon, ServerIcon, ShieldLockIcon, SparkleIcon } from "@/components/icons";
import { Avatar } from "@/components/ui";
import { requireViewer } from "@/lib/auth";

export default async function SettingsLayout({ children }: LayoutProps<"/settings">) {
  const viewer = await requireViewer("/settings/profile");
  return (
    <div className="mx-auto w-full max-w-[1100px] px-4 py-10 md:px-6">
      <div className="mb-8 flex items-center gap-4">
        <Avatar name={viewer.name || viewer.username} size={52} />
        <div>
          <h1 className="text-2xl font-semibold tracking-[-0.03em]">{viewer.name || viewer.username}</h1>
          <p className="text-muted">Your personal account settings</p>
        </div>
      </div>
      <div className="grid gap-8 md:grid-cols-[220px_1fr]">
        <SettingsNav
          title="Account"
          items={[
            { href: "/settings/profile", label: "Public profile", icon: <PersonIcon /> },
            { href: "/settings/keys", label: "SSH keys", icon: <KeyIcon /> },
            { href: "/settings/tokens", label: "API tokens", icon: <ShieldLockIcon /> },
            { href: "/settings/runners", label: "Runners", icon: <ServerIcon /> },
            { href: "/settings/applications", label: "Connected apps", icon: <SparkleIcon /> },
          ]}
        />
        <div className="min-w-0">{children}</div>
      </div>
    </div>
  );
}