"use client";

import { type ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { t } from "@/lib/i18n";

interface TabItem {
  label: string;
  href: string;
  exact: boolean;
}

const TABS: TabItem[] = [
  { label: "操作日志", href: "/admin/audit-logs", exact: true },
  {
    label: t("admin.auditLogs.overview"),
    href: "/admin/audit-logs/overview",
    exact: false,
  },
  {
    label: t("admin.auditLogs.dataChanges"),
    href: "/admin/audit-logs/data-changes",
    exact: false,
  },
  {
    label: t("admin.auditLogs.loginLogs"),
    href: "/admin/audit-logs/login-logs",
    exact: false,
  },
];

export function AuditLogsTabs(): ReactNode {
  const pathname = usePathname();
  return (
    <div
      className="flex gap-1 mb-4"
      style={{ borderBottom: "1px solid var(--color-rule)" }}
    >
      {TABS.map((tab) => {
        const active = tab.exact
          ? pathname === tab.href
          : pathname.startsWith(tab.href);
        return (
          <Link
            key={tab.href}
            href={tab.href}
            style={{
              padding: "8px 16px",
              fontSize: 13,
              color: active ? "var(--color-accent)" : "var(--color-ink-muted)",
              borderBottom: active
                ? "2px solid var(--color-accent)"
                : "2px solid transparent",
              textDecoration: "none",
              fontFamily: active ? "var(--font-serif)" : "var(--font-sans)",
            }}
          >
            {tab.label}
          </Link>
        );
      })}
    </div>
  );
}
