/**
 * `ProjectTabs` — the project tab bar rendered below the app header.
 *
 * Shows one tab per open project with a close control, and a "+" button to
 * return to the launcher.  Purely presentational: all state lives in the
 * parent (ProjectsView via useProjects).
 */

import type { TabItem } from "@/shared";
import { Button, Tabs, cn } from "@/shared";

export interface ProjectTabsProps {
  items: TabItem[];
  activeTabId: string | null;
  onSelect: (id: string) => void;
  onClose: (id: string) => void;
  /** Whether the launcher overlay is currently visible (no active tab). */
  showingLauncher: boolean;
  onShowLauncher: () => void;
  className?: string;
}

export function ProjectTabs({
  items,
  activeTabId,
  onSelect,
  onClose,
  showingLauncher,
  onShowLauncher,
  className,
}: ProjectTabsProps) {
  if (items.length === 0) return null;

  return (
    <div
      className={cn(
        "flex items-center gap-1 border-b border-border bg-surface px-2 py-1",
        className,
      )}
    >
      <Tabs
        items={items}
        value={activeTabId}
        onSelect={onSelect}
        onClose={onClose}
        className="flex-1"
      />
      <Button
        size="sm"
        variant={showingLauncher ? "secondary" : "ghost"}
        onClick={onShowLauncher}
        aria-label="open project launcher"
        className="shrink-0"
      >
        +
      </Button>
    </div>
  );
}