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

/**
 * Mobile tab navigation bar.
 * Replaces the sidebar on screens <768px.
 * Displays icon + label for each section; active tab highlighted with accent color (#4f8cff).
 */

interface TabItem {
  label: string;
  href: string;
  icon: string;
}

const TABS: TabItem[] = [
  { label: "Overview", href: "/", icon: "📊" },
  { label: "Filings", href: "/filings", icon: "📄" },
  { label: "Options", href: "/options-dd", icon: "🔮" },
  { label: "Alerts", href: "/alerts", icon: "🔔" },
  { label: "Execution", href: "/execution", icon: "⚡" },
  { label: "Trade Plan", href: "/trade-plan", icon: "📋" },
  { label: "Settings", href: "/settings", icon: "⚙️" },
];

export function MobileTabNav() {
  const pathname = usePathname();

  return (
    <nav className="flex md:hidden border-t border-line-strong bg-surface-raised">
      {TABS.map((tab) => {
        const isActive = pathname === tab.href;
        return (
          <Link
            key={tab.href}
            href={tab.href}
            className={`flex-1 flex flex-col items-center justify-center py-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset ${
              isActive
                ? "text-accent border-b-2 border-b-accent"
                : "text-fg-muted hover:text-fg"
            }`}
          >
            <span className="text-base">{tab.icon}</span>
            <span className="text-[10px] mt-0.5">{tab.label}</span>
          </Link>
        );
      })}
    </nav>
  );
}