workshop-manager/src/components/ui/ToggleGroup.tsx

'use client';

import { ReactNode } from 'react';

export interface ToggleOption<T extends string> {
  value: T;
  label: string;
  icon?: ReactNode;
}

interface ToggleGroupProps<T extends string> {
  value: T;
  options: ToggleOption<T>[];
  onChange: (value: T) => void;
  className?: string;
}

export function ToggleGroup<T extends string>({
  value,
  options,
  onChange,
  className = '',
}: ToggleGroupProps<T>) {
  return (
    <div className={`flex items-center gap-2 rounded-lg border border-border bg-card p-1 ${className}`}>
      {options.map((option) => (
        <button
          key={option.value}
          type="button"
          onClick={() => onChange(option.value)}
          className={`
            flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors
            ${value === option.value
              ? 'bg-[#8b5cf6] text-white shadow-sm'
              : 'text-muted hover:text-foreground hover:bg-card-hover'
            }
          `}
        >
          {option.icon && <span className="flex items-center">{option.icon}</span>}
          {option.label}
        </button>
      ))}
    </div>
  );
}