'use client';

import { classNames } from '@/lib/components/classNames';
import styles from './SegmentedControl.module.css';

export interface SegmentOption {
  value: string;
  label: string;
  disabled?: boolean;
}

interface SegmentedControlProps {
  label: string;
  value: string;
  options: SegmentOption[];
  onChange: (value: string) => void;
  className?: string;
}

export function SegmentedControl({
  label,
  value,
  options,
  onChange,
  className,
}: SegmentedControlProps) {
  return (
    <div className={classNames(styles.control, className)} role="radiogroup" aria-label={label}>
      {options.map((option) => (
        <button
          key={option.value}
          type="button"
          role="radio"
          aria-checked={option.value === value}
          disabled={option.disabled}
          className={styles.option}
          onClick={() => onChange(option.value)}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}
