'use client';

import { cn } from '@/lib/cn';

export function Segmented<T extends string>({
  options,
  value,
  onChange,
  className,
}: {
  options: { id: T; label: string }[];
  value: T;
  onChange: (id: T) => void;
  className?: string;
}) {
  return (
    <div className={cn('inline-flex border border-line rounded-lg overflow-hidden', className)}>
      {options.map((o) => (
        <button
          key={o.id}
          type="button"
          onClick={() => onChange(o.id)}
          className={cn(
            'border-0 px-4 py-1.5 text-sm cursor-pointer flex-1',
            value === o.id
              ? 'bg-surface-2 text-text font-semibold'
              : 'bg-surface text-muted',
          )}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}