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 TabNavigationProps {
  tabs: Tab[];
  activeTab: string;
  onTabChange: (tabId: string) => void;
  className?: string;
}

export function TabNavigation({ tabs, activeTab, onTabChange, className = '' }: TabNavigationProps) {
  return (
    <Surface 
      variant="muted" 
      rounded="xl" 
      p={1} 
      display="inline-flex" 
      zIndex={10} 
      className={className}
    >
      <Stack direction="row" gap={1}>
        {tabs.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <Surface
              key={tab.id}
              as="button"
              onClick={() => onTabChange(tab.id)}
              variant={isActive ? 'default' : 'ghost'}
              bg={isActive ? 'bg-primary-blue' : ''}
              rounded="lg"
              px={4}
              py={2}
              transition="all 0.2s"
              group
              className={`select-none ${isActive ? 'shadow-lg shadow-primary-blue/25' : 'hover:bg-iron-gray/80'}`}
            >
              <Stack direction="row" align="center" gap={2}>
                {tab.icon && (
                  <Box color={isActive ? 'text-white' : 'text-gray-400'} groupHoverTextColor={!isActive ? 'white' : undefined}>
                    {tab.icon}
                  </Box>
                )}
                <Text 
                  size="sm" 
                  weight="medium" 
                  color={isActive ? 'text-white' : 'text-gray-400'} 
                  groupHoverTextColor={!isActive ? 'white' : undefined}
                >
                  {tab.label}
                </Text>
              </Stack>
            </Surface>
          );
        })}
      </Stack>
    </Surface>
  );
}