import { Badge } from './Badge';
import { Box } from './Box';
import { Text } from './Text';

interface Tab {
  id: string;
  label: string;
  count?: number;
  countVariant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
}

interface BorderTabsProps {
  tabs: Tab[];
  activeTab: string;
  onTabChange: (tabId: string) => void;
}

export function BorderTabs({ tabs, activeTab, onTabChange }: BorderTabsProps) {
  return (
    <Box borderBottom borderColor="border-charcoal-outline">
      <Box display="flex" gap={4}>
        {tabs.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <Box
              key={tab.id}
              as="button"
              type="button"
              onClick={() => onTabChange(tab.id)}
              pb={3}
              px={1}
              cursor="pointer"
              transition
              borderBottom={isActive}
              borderColor={isActive ? 'border-primary-blue' : ''}
              style={{ 
                borderBottomWidth: isActive ? '2px' : '0',
                marginBottom: '-1px'
              }}
            >
              <Box display="flex" alignItems="center" gap={2}>
                <Text 
                  size="sm" 
                  weight="medium" 
                  color={isActive ? 'text-primary-blue' : 'text-gray-400'}
                  className={!isActive ? 'hover:text-white' : ''}
                >
                  {tab.label}
                </Text>
                {tab.count !== undefined && tab.count > 0 && (
                  <Badge variant={tab.countVariant || 'warning'}>
                    {tab.count}
                  </Badge>
                )}
              </Box>
            </Box>
          );
        })}
      </Box>
    </Box>
  );
}