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-9 md:h-8 min-h-[36px] md:min-h-8">
      <div className="flex overflow-x-auto flex-1 scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent">
        {openFiles.map((file) => (
          <div
            key={file.id}
            className={`flex items-center gap-1 px-3 md:px-3 py-1 md:py-0 h-9 md: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 md:text-xs truncate max-w-[100px] md:max-w-[120px]">{file.name}</span>
            <Button
              variant="ghost"
              size="icon"
              className="h-5 w-5 md:h-4 md:w-4 p-0 ml-1 opacity-70 md:opacity-0 group-hover:opacity-100 hover:text-destructive flex-shrink-0 touch-manipulation"
              onClick={(e) => {
                e.stopPropagation();
                onFileClose(file.id);
              }}
              tabIndex={-1}
            >
              <X size={14} className="md:hidden" />
              <X size={12} className="hidden md:block" />
            </Button>
          </div>
        ))}
      </div>
    </div>
  );
}
