import styles from './SegmentedControl.module.scss';

export interface SegmentOption {
  /** Unique value for this segment */
  value: string;
  /** Display label */
  label: string;
}

export interface SegmentedControlProps {
  /** Array of segment options */
  options: SegmentOption[];
  /** Currently selected value */
  value: string;
  /** Callback when selection changes */
  onChange: (value: string) => void;
  /** Additional CSS classes */
  className?: string;
}

export const SegmentedControl = ({
  options,
  value,
  onChange,
  className = '',
}: SegmentedControlProps) => {
  const containerClassName = [styles.container, className].filter(Boolean).join(' ');

  return (
    <div className={containerClassName} role="tablist">
      {options.map((option) => {
        const isSelected = option.value === value;
        const segmentClassName = [
          styles.segment,
          isSelected && styles.selected,
        ].filter(Boolean).join(' ');

        return (
          <button
            key={option.value}
            type="button"
            role="tab"
            aria-selected={isSelected}
            className={segmentClassName}
            onClick={() => onChange(option.value)}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
};