"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

const TABS = [
  { href: "/analytics", label: "Свердл рынок" },
  { href: "/analytics/prinzip", label: "PRINZIP" },
  { href: "/analytics/developers", label: "Девелоперы" },
  { href: "/analytics/recommend", label: "Рекомендатор" },
];

export function AnalyticsNav() {
  const pathname = usePathname();
  return (
    <nav
      style={{
        display: "flex",
        gap: 8,
        borderBottom: "1px solid #e6e8ec",
        marginBottom: 16,
      }}
    >
      {TABS.map((tab) => {
        const active = pathname === tab.href;
        return (
          <Link
            key={tab.href}
            href={tab.href}
            style={{
              padding: "10px 14px",
              borderBottom: active
                ? "2px solid #1d4ed8"
                : "2px solid transparent",
              color: active ? "#1d4ed8" : "#374151",
              fontWeight: active ? 600 : 500,
              textDecoration: "none",
              fontSize: 14,
            }}
          >
            {tab.label}
          </Link>
        );
      })}
    </nav>
  );
}