src/components/ChromeTabBar.tsx

import React from 'react';
import { X, Plus } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface Tab {
  id: string;
  title: string;
  url: string;
  isActive: boolean;
}

interface ChromeTabBarProps {
  tabs: Tab[];
  onTabSelect: (tabId: string) => void;
  onTabClose: (tabId: string) => void;
  onNewTab: () => void;
}

const ChromeTabBar = ({ tabs, onTabSelect, onTabClose, onNewTab }: ChromeTabBarProps) => {
  return (
    <div className="bg-gray-100 border-b border-gray-200 px-3 pt-2 flex items-end">
      <div className="flex items-end gap-0 flex-1">
        {tabs.map((tab) => (
          <div
            key={tab.id}
            onClick={() => onTabSelect(tab.id)}
            className={`
              relative group cursor-pointer flex items-center gap-2 px-4 py-2 min-w-0 max-w-60 
              ${tab.isActive 
                ? 'bg-white border-t border-l border-r border-gray-200 rounded-t-lg' 
                : 'bg-gray-200 hover:bg-gray-300 rounded-t-lg mx-0.5'
              }
            `}
          >
            <div className="flex-1 truncate text-sm">
              {tab.title || 'New Tab'}
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={(e) => {
                e.stopPropagation();
                onTabClose(tab.id);
              }}
              className="w-5 h-5 p-0 rounded-full opacity-0 group-hover:opacity-100 hover:bg-gray-200"
            >
              <X className="w-3 h-3" />
            </Button>
          </div>
        ))}
        <Button
          variant="ghost"
          size="sm"
          onClick={onNewTab}
          className="w-8 h-8 p-0 rounded-full hover:bg-gray-200 ml-2"
        >
          <Plus className="w-4 h-4" />
        </Button>
      </div>
    </div>
  );
};

export default ChromeTabBar;