import * as React from "react";
import { adminTexts } from "@/lib/i18n/admin";
import type { AdminBadges } from "@/lib/admin/badges";
import { AdminNav } from "./admin-nav";
import type { AdminAccount } from "./account-menu";
import type { AdminAlertDto } from "./alerts-bell";

/**
 * Admin chrome: sticky navy top nav + dense content container.
 * Rendered once by app/admin/layout.tsx; pages just return their content.
 */
export function AdminShell({
  user,
  badges,
  alerts,
  children,
}: {
  user: AdminAccount;
  badges: AdminBadges;
  alerts: AdminAlertDto[];
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-muted/40 dark:bg-[#0b1220]">
      <a
        href="#admin-content"
        className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:rounded-lg focus:bg-blue-600 focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-white"
      >
        {adminTexts.skipToContent}
      </a>

      <AdminNav user={user} badges={badges} alerts={alerts} />

      <main id="admin-content" className="mx-auto w-full max-w-screen-2xl p-3 sm:p-4">
        {children}
      </main>
    </div>
  );
}

export default AdminShell;