testing-tool/src/components/SwitchButtonGroup.tsx

import React from 'react';
import { cn } from '@/lib/utils';

export interface SwitchOption<T extends string | number = string> {
  value: T;
  label: React.ReactNode;
}

export interface SwitchButtonGroupProps<T extends string | number = string> extends Omit<
  React.HTMLAttributes<HTMLDivElement>,
  'onChange'
> {
  value: T;
  options: SwitchOption<T>[];
  onChange: (value: T) => void;
  size?: 'small' | 'medium' | 'large';
  buttonClassName?: string;
}

export default function SwitchButtonGroup<T extends string | number = string>({
  value,
  options,
  onChange,
  size = 'medium',
  className,
  buttonClassName,
  ...props
}: SwitchButtonGroupProps<T>) {
  const sizeClasses = {
    small: 'text-xs h-8 px-2 py-1 rounded-md',
    medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
    large: 'text-base h-11 px-4 py-2 rounded-lg',
  };

  return (
    <div
      className={cn(
        'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground p-1',
        className,
      )}
      {...props}
    >
      {options.map((option) => {
        const isSelected = value === option.value;

        return (
          <button
            key={option.value}
            type="button"
            onClick={() => onChange(option.value)}
            className={cn(
              'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
              'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
              'disabled:pointer-events-none disabled:opacity-50',
              sizeClasses[size],
              isSelected
                ? 'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150'
                : 'hover:bg-background/50 hover:text-foreground/80',
              buttonClassName,
            )}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
}