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

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

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

export function BorderTabs({ tabs, activeTab, onTabChange, className = '' }: BorderTabsProps) {
  return (
    <Box borderBottom borderColor="border-border-gray/50" className={className}>
      <Stack direction="row" gap={8}>
        {tabs.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <Surface
              key={tab.id}
              as="button"
              onClick={() => onTabChange(tab.id)}
              variant="ghost"
              px={1}
              py={4}
              position="relative"
              borderColor={isActive ? 'border-primary-blue' : ''}
              borderBottom={isActive}
              borderWidth={isActive ? '2px' : '0'}
              mb="-1px"
              transition="all 0.2s"
              group
            >
              <Stack direction="row" align="center" gap={2}>
                {tab.icon && (
                  <Box color={isActive ? 'text-primary-blue' : 'text-gray-400'} groupHoverTextColor={!isActive ? 'white' : undefined}>
                    {tab.icon}
                  </Box>
                )}
                <Text 
                  size="sm" 
                  weight="medium" 
                  color={isActive ? 'text-primary-blue' : 'text-gray-400'} 
                  groupHoverTextColor={!isActive ? 'white' : undefined}
                >
                  {tab.label}
                </Text>
              </Stack>
            </Surface>
          );
        })}
      </Stack>
    </Box>
  );
}