import { cn } from './cn';

export type SegmentedOption = { value: string; label: string };

export function SegmentedControl({
  value,
  options,
  onChange,
  className,
}: {
  value: string;
  options: SegmentedOption[];
  onChange: (value: string) => void;
  className?: string;
}) {
  return (
    <div className={cn('ask-inline-flex ask-rounded-full ask-border ask-border-borderSubtle ask-bg-surface ask-p-1', className)}>
      {options.map((opt) => {
        const active = opt.value === value;
        return (
          <button
            key={opt.value}
            type="button"
            onClick={() => onChange(opt.value)}
            className={cn(
              'ask-h-7 ask-rounded-full ask-px-3 ask-text-[12px] ask-transition',
              active ? 'ask-bg-primary ask-text-white' : 'ask-text-textMain hover:ask-bg-surfaceAlt'
            )}
          >
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}
