import React from 'react';
import { Box } from './primitives/Box';
import { Text } from './Text';

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

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

export const BorderTabs = ({ 
  tabs, 
  activeTabId, 
  onTabChange 
}: BorderTabsProps) => {
  return (
    <Box display="flex" borderBottom>
      {tabs.map((tab) => {
        const isActive = tab.id === activeTabId;
        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}
            </Box>
            {isActive && (
              <Box 
                position="absolute" 
                bottom={0} 
                left={0} 
                right={0} 
                height="2px" 
                bg="var(--ui-color-intent-primary)" 
              />
            )}
          </button>
        );
      })}
    </Box>
  );
};