'use client';

export interface TabItem {
  id: string;
  label: string;
  icon?: string;
  count?: number;
  disabled?: boolean;
}

interface TabsProps {
  items: TabItem[];
  activeTab: string;
  onTabChange: (tabId: string) => void;
  className?: string;
}

export function Tabs({ items, activeTab, onTabChange, className = '' }: TabsProps) {
  return (
    <div className={`border-b border-[var(--border)] ${className}`}>
      <nav className="flex space-x-8">
        {items.map((item) => (
          <button
            key={item.id}
            onClick={() => !item.disabled && onTabChange(item.id)}
            disabled={item.disabled}
            className={`py-3 px-1 border-b-2 font-medium text-sm transition-colors ${
              activeTab === item.id
                ? 'border-[var(--primary)] text-[var(--primary)]'
                : 'border-transparent text-[var(--muted-foreground)] hover:text-[var(--foreground)]'
            } ${item.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
          >
            <span className="flex items-center gap-2">
              {item.icon && <span>{item.icon}</span>}
              <span>{item.label}</span>
              {item.count !== undefined && (
                <span className="text-xs opacity-75">({item.count})</span>
              )}
            </span>
          </button>
        ))}
      </nav>
    </div>
  );
}