CedarCopilot/cedar-mail

'use client';

import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { AGENT_TABS, AGENT_TAB_LABELS, type AgentTab } from '@/modules/agents/types';

/**
 * The workspace tab strip. Same primitive, same `type="underline"`, same bordered
 * scroll container as ConversationTabs — the two strips have to be
 * indistinguishable, because they are the same control on two screens.
 */
export function AgentTabs({
  value,
  onValueChange,
}: {
  value: AgentTab;
  onValueChange: (next: AgentTab) => void;
}) {
  return (
    <Tabs
      type="underline"
      value={value}
      onValueChange={(v) => onValueChange(v as AgentTab)}
      activateCmdArrowNavOnMount
    >
      <div className="w-full overflow-x-auto border-b border-border [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        <TabsList className="inline-flex w-max gap-2 border-b-0 px-1">
          {AGENT_TABS.map((key) => (
            <TabsTrigger key=[redacted] value={key}>
              {AGENT_TAB_LABELS[key]}
            </TabsTrigger>
          ))}
        </TabsList>
      </div>
    </Tabs>
  );
}