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

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

export interface TabNavigationProps {
  options: TabNavigationOption[];
  activeId: string;
  onChange: (id: string) => void;
}

export const TabNavigation = ({ 
  options, 
  activeId, 
  onChange 
}: TabNavigationProps) => {
  return (
    <Surface variant="muted" rounded="xl" padding={1} display="inline-flex">
      {options.map((option) => {
        const isActive = option.id === activeId;
        return (
          <button
            key={option.id}
            onClick={() => onChange(option.id)}
            className={`px-4 py-2 text-xs font-bold uppercase tracking-widest transition-all rounded-lg ${
              isActive 
                ? 'bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-intent-primary)] shadow-sm' 
                : 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]'
            }`}
          >
            <Box display="flex" alignItems="center" gap={2}>
              {option.icon}
              {option.label}
            </Box>
          </button>
        );
      })}
    </Surface>
  );
};