import { Code, MessageSquare, Plus, Terminal } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

interface Props {
  onAddPane: (kind: 'chat' | 'terminal' | 'coder') => void;
  disabled?: boolean;
}

// v1.8 row-2 right cluster: mirrors the desktop Workspace.tsx Split dropdown.
// Terminal + Coder items pass through to addSplitPane which creates panes
// of the appropriate kind.
export function NewPaneMenu({ onAddPane, disabled }: Props) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          disabled={disabled}
          className="inline-flex items-center justify-center min-h-[44px] min-w-[44px] rounded-full bg-muted/40 hover:bg-muted/70 text-foreground disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
          aria-label="New pane"
        >
          <Plus size={16} />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onSelect={() => onAddPane('chat')}>
          <MessageSquare size={14} /> New chat
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
          <Terminal size={14} /> New terminal
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => onAddPane('coder')}>
          <Code size={14} /> New coder
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}