import { Box } from './Box';


export interface TabOption {
  id: string;
  label: string;
  icon?: React.ReactNode;
  count?: number;
}

export interface BorderTabsProps {
  tabs: TabOption[];
  activeTabId?: string;
  onTabChange: (id: string) => void;
  activeTab?: string;
}

export const BorderTabs = ({ 
  tabs, 
  activeTabId, 
  onTabChange,
  activeTab
}: BorderTabsProps) => {
  const finalActiveTabId = activeTabId || activeTab || '';

  return (
    <Box display="flex" borderBottom>
      {tabs.map((tab) => {
        const isActive = tab.id === finalActiveTabId;
        return (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={`px-6 py-4 text-sm font-bold uppercase tracking-widest transition-all relative ${
              isActive 
                ? 'text-[var(--ui-color-intent-primary)]' 
                : 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]'
            }`}
          >
            <Box display="flex" alignItems="center" gap={2}>
              {tab.icon}
              {tab.label}
              {tab.count !== undefined && (
                <Box as="span" px={1.5} py={0.5} rounded="full" bg="white/10" fontSize="10px">
                  {tab.count}
                </Box>
              )}
            </Box>
            {isActive && (
              <Box 
                position="absolute" 
                bottom={0} 
                left={0} 
                right={0} 
                height="2px" 
                bg="var(--ui-color-intent-primary)" 
              />
            )}
          </button>
        );
      })}
    </Box>
  );
};