import Link from "next/link";
import type { Locale } from "@/i18n/routes";
import { getDict } from "@/i18n/dictionaries";
import { LogoutButton } from "./logout-button";

export function AdminShell({
  locale,
  title,
  active,
  children,
}: {
  locale: Locale;
  title: string;
  active: "dashboard" | "profile" | "projects" | "newProject" | "editProject";
  children: React.ReactNode;
}) {
  const dict = getDict(locale);
  const items = [
    { id: "dashboard", href: "/admin/dashboard", label: dict.admin.dashboardTitle },
    { id: "profile", href: "/admin/profile", label: dict.admin.profileTitle },
    { id: "projects", href: "/admin/projects", label: dict.admin.projectsTitle },
  ] as const;
  return (
    <div className="min-h-screen bg-[var(--bg)] text-[var(--fg)]">
      <header className="border-b border-hairline bg-[var(--bg-deep)]">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
          <div className="flex items-center gap-4">
            <Link href="/admin/dashboard" className="font-mono text-sm">
              <span className="text-accent">$</span> eldov<span className="text-muted">.admin</span>
            </Link>
            <span className="font-mono text-xs text-muted">[{title}]</span>
          </div>
          <LogoutButton locale={locale} />
        </div>
        <nav className="mx-auto flex max-w-6xl gap-4 px-4 pb-2">
          {items.map((it) => (
            <Link
              key={it.id}
              href={it.href}
              className={`border-b-2 px-2 pb-2 font-mono text-xs uppercase ${
                active === it.id ? "border-accent text-accent" : "border-transparent text-muted hover:text-[var(--fg)]"
              }`}
            >
              {it.label}
            </Link>
          ))}
        </nav>
      </header>
      <main className="mx-auto max-w-6xl px-4 py-8">{children}</main>
    </div>
  );
}