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

interface Tab {
  id: string;
  label: string;
  icon?: any;
}

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

export function TabNavigation({ tabs, activeTab, onTabChange, className = '' }: TabNavigationProps) {
  return (
    <Box 
      display="flex" 
      alignItems="center" 
      gap={1} 
      p={1.5} 
      rounded="xl" 
      bg="bg-iron-gray/50" 
      border 
      borderColor="border-charcoal-outline" 
      w="fit" 
      position="relative" 
      zIndex={10} 
      className={className}
    >
      {tabs.map((tab) => {
        const isActive = activeTab === tab.id;
        return (
          <Box
            key={tab.id}
            as="button"
            type="button"
            onClick={() => onTabChange(tab.id)}
            display="flex"
            alignItems="center"
            gap={2}
            px={5}
            py={2.5}
            rounded="lg"
            cursor="pointer"
            transition
            bg={isActive ? 'bg-primary-blue' : ''}
            className={`select-none ${isActive ? 'shadow-lg shadow-primary-blue/25' : 'hover:bg-iron-gray/80'}`}
          >
            {tab.icon && <Icon icon={tab.icon} size={4} color={isActive ? 'text-white' : 'text-gray-400'} />}
            <Text 
              size="sm" 
              weight="medium" 
              color={isActive ? 'text-white' : 'text-gray-400'}
              className={!isActive ? 'hover:text-white' : ''}
            >
              {tab.label}
            </Text>
          </Box>
        );
      })}
    </Box>
  );
}