SurfSense/surfsense_web/components/chat/SegmentedControl.tsx

import React from 'react';

type SegmentedControlProps<T extends string> = {
  value: T;
  onChange: (value: T) => void;
  options: Array<{
    value: T;
    label: string;
    icon: React.ReactNode;
  }>;
};

/**
 * A segmented control component for selecting between different options
 */
function SegmentedControl<T extends string>({ value, onChange, options }: SegmentedControlProps<T>) {
  return (
    <div className="flex h-7 rounded-md border border-border overflow-hidden">
      {options.map((option) => (
        <button
          key={option.value}
          className={`flex h-full items-center gap-1 px-2 text-xs transition-colors ${
            value === option.value 
              ? 'bg-primary text-primary-foreground' 
              : 'hover:bg-muted'
          }`}
          onClick={() => onChange(option.value)}
          aria-pressed={value === option.value}
        >
          {option.icon}
          <span>{option.label}</span>
        </button>
      ))}
    </div>
  );
}

export default SegmentedControl;