gridpilot.gg/apps/website/ui/SegmentedControl.tsx

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

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

export interface SegmentedControlProps {
  options: SegmentedControlOption[];
  activeId: string;
  onChange: (id: string) => void;
  fullWidth?: boolean;
  'data-testid'?: string;
}

export const SegmentedControl = ({
  options,
  activeId,
  onChange,
  fullWidth = false,
  'data-testid': dataTestId
}: SegmentedControlProps) => {
  return (
    <Surface 
      variant="muted" 
      rounded="lg" 
      padding={1} 
      display="inline-flex" 
      width={fullWidth ? '100%' : undefined}
    >
      {options.map((option) => {
        const isSelected = option.id === activeId;
        return (
          <button
            data-testid={dataTestId ? `${dataTestId}-${option.id}` : undefined}
            key={option.id}
            onClick={() => onChange(option.id)}
            className={`flex-1 flex items-center justify-center gap-2 px-4 py-1.5 text-xs font-bold uppercase tracking-widest transition-all rounded-md ${
              isSelected 
                ? '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)]'
            }`}
          >
            {option.icon}
            {option.label}
          </button>
        );
      })}
    </Surface>
  );
};