"use client";

import { useTranslations } from "next-intl";
import { Link, usePathname } from "@/i18n/navigation";

interface ServerTabsProps {
  serverId: string;
}

const tabs = [
  { key: "overview", suffix: "" },
  { key: "console", suffix: "/console" },
  { key: "files", suffix: "/files" },
  { key: "properties", suffix: "/properties" },
  { key: "players", suffix: "/players" },
  { key: "worlds", suffix: "/worlds" },
  { key: "backups", suffix: "/backups" },
  { key: "addons", suffix: "/addons" },
] as const;

export function ServerTabs({ serverId }: ServerTabsProps) {
  const t = useTranslations("servers.tabs");
  const pathname = usePathname();

  const basePath = `/servers/${serverId}`;

  function isActive(suffix: string): boolean {
    const href = `${basePath}${suffix}`;
    if (suffix === "") {
      return pathname === basePath;
    }
    return pathname === href || pathname.startsWith(`${href}/`);
  }

  return (
    <nav
      aria-label={t("navigation")}
      className="flex flex-wrap gap-1 border-b border-zinc-200 dark:border-zinc-800"
    >
      {tabs.map((tab) => {
        const href = `${basePath}${tab.suffix}`;
        const active = isActive(tab.suffix);

        return (
          <Link
            key={tab.key}
            href={href}
            className={[
              "inline-flex items-center border-b-2 px-3 py-2 text-sm font-medium transition-colors",
              active
                ? "border-sky-500 text-sky-600 dark:text-sky-400"
                : "border-transparent text-zinc-600 hover:border-zinc-300 hover:text-zinc-900 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:text-zinc-100",
            ].join(" ")}
            aria-current={active ? "page" : undefined}
          >
            {t(tab.key)}
          </Link>
        );
      })}
    </nav>
  );
}
