import { AdminLogoutButton } from "@/components/AdminLogoutButton";
import { Link } from "@/i18n/navigation";
import { getTranslations } from "next-intl/server";

export async function AdminNav() {
  const t = await getTranslations("admin.nav");

  const items = [
    { href: "/admin", label: t("overview") },
    { href: "/admin/content", label: t("content") },
    { href: "/admin/gallery", label: t("gallery") },
    { href: "/admin/reservations", label: t("reservations") },
  ] as const;

  return (
    <div className="flex flex-wrap items-center justify-between gap-4 border-b border-border bg-card/40 px-4 py-4 md:px-6">
      <nav className="flex flex-wrap gap-2">
        {items.map(({ href, label }) => (
          <Link
            key={href}
            href={href}
            className="rounded-md px-3 py-2 text-sm text-foreground/90 hover:bg-background hover:text-gold"
          >
            {label}
          </Link>
        ))}
      </nav>
      <div className="flex items-center gap-3">
        <Link
          href="/"
          className="text-sm text-muted hover:text-gold"
        >
          ← Site
        </Link>
        <AdminLogoutButton />
      </div>
    </div>
  );
}