import { X } from '@phosphor-icons/react';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { FileNode } from './FileTree';

interface FileTabsProps {
  openFiles: FileNode[];
  activeFileId?: string;
  onFileSelect: (file: FileNode) => void;
  onFileClose: (id: string) => void;
}

export function FileTabs({
  openFiles,
  activeFileId,
  onFileSelect,
  onFileClose,
}: FileTabsProps) {
  if (openFiles.length === 0) return null;

  return (
    <div className="flex items-center bg-card/70 border-b border-border h-8 min-h-8">
      <div className="flex overflow-x-auto flex-1">
        {openFiles.map((file) => (
          <div
            key={file.id}
            className={`flex items-center gap-1 px-3 h-8 border-r border-border cursor-pointer group min-w-0 transition-colors select-none ${
              activeFileId === file.id
                ? 'bg-background border-b-2 border-b-accent font-semibold text-accent'
                : 'hover:bg-muted/60 text-muted-foreground'
            }`}
            onClick={() => onFileSelect(file)}
            title={file.name}
          >
            <span className="text-xs truncate max-w-[100px]">{file.name}</span>
            <Button
              variant="ghost"
              size="icon"
              className="h-4 w-4 p-0 ml-1 opacity-0 group-hover:opacity-100 hover:text-destructive flex-shrink-0"
              onClick={(e) => {
                e.stopPropagation();
                onFileClose(file.id);
              }}
              tabIndex={-1}
            >
              <X size={12} />
            </Button>
          </div>
        ))}
      </div>
    </div>
  );
}
