import * as React from 'react';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

export interface SegmentedControlOption<T extends string = string> {
  value: T;
  label: React.ReactNode;
}

interface SegmentedControlProps<T extends string> {
  options: SegmentedControlOption<T>[];
  value: T;
  onChange: (value: T) => void;
  className?: string;
  size?: 'sm' | 'default';
}

export function SegmentedControl<T extends string>({
  options,
  value,
  onChange,
  className,
  size = 'default',
}: SegmentedControlProps<T>) {
  return (
    <div className={cn('inline-flex items-center', className)} role="group">
      {options.map((option, index) => {
        const isActive = value === option.value;
        const isFirst = index === 0;
        const isLast = index === options.length - 1;
        return (
          <Button
            key={option.value}
            type="button"
            variant={isActive ? 'default' : 'secondary'}
            size={size === 'sm' ? 'sm' : 'default'}
            onClick={() => onChange(option.value)}
            className={cn(
              'rounded-none shadow-none',
              isFirst && 'rounded-l-lg',
              isLast && 'rounded-r-lg',
              !isFirst && 'border-l-0',
            )}
          >
            {option.label}
          </Button>
        );
      })}
    </div>
  );
}