import type { AssetTab } from './assetTabUtils';

interface AssetTabsProps {
  tabs: AssetTab[];
  activeTab: string;
  onTabChange: (tabKey: string) => void;
}

export function AssetTabs({ tabs, activeTab, onTabChange }: AssetTabsProps) {
  if (tabs.length === 0) {
    return null;
  }

  return (
    <div className="border-b border-gray-200">
      <nav className="-mb-px flex space-x-4" aria-label="Asset tabs">
        {tabs.map((tab) => (
          <button
            key={tab.key}
            onClick={() => onTabChange(tab.key)}
            className={`
              whitespace-nowrap py-3 px-4 border-b-2 font-medium text-sm transition-colors
              ${activeTab === tab.key
                ? 'border-indigo-500 text-indigo-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }
            `}
          >
            {tab.label}
            {tab.isAccessible && (
              <span className="ml-1.5 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700">
                AD
              </span>
            )}
          </button>
        ))}
      </nav>
    </div>
  );
}
