"use client";

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

const tabs = [
  { label: "Details", href: "" },
  { label: "Pipeline", href: "/pipeline" },
  { label: "Assets", href: "/assets" },
  { label: "Claude Chat", href: "/chat" },
];

export default function CampaignDetailLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);
  const pathname = usePathname();
  const basePath = `/campaigns/${id}`;

  return (
    <div className="space-y-6">
      <nav className="flex gap-1 border-b">
        {tabs.map((tab) => {
          const href = `${basePath}${tab.href}`;
          const isActive =
            tab.href === ""
              ? pathname === basePath
              : pathname.startsWith(href);

          return (
            <Link
              key={tab.label}
              href={href}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                isActive
                  ? "border-primary text-primary"
                  : "border-transparent text-muted-foreground hover:text-foreground"
              }`}
            >
              {tab.label}
            </Link>
          );
        })}
      </nav>
      {children}
    </div>
  );
}