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

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

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

export const TabNavigation = ({ 
  options, 
  activeId, 
  onChange,
  tabs,
  activeTab,
  onTabChange
}: TabNavigationProps) => {
  const finalOptions = options || tabs || [];
  const finalActiveId = activeId || activeTab || '';
  const finalOnChange = onChange || onTabChange || (() => {});

  return (
    <Surface variant="muted" rounded="xl" padding={1} display="inline-flex">
      {finalOptions.map((option) => {
        const isActive = option.id === finalActiveId;
        return (
          <button
            key={option.id}
            onClick={() => finalOnChange(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>
  );
};