import { type ReactNode } from 'react';

import { cn } from '@/utils/classNames';

export interface SegmentedControlOption<TValue extends string> {
  readonly value: TValue;
  readonly label: string;
  readonly icon?: ReactNode;
  readonly ariaLabel?: string;
}

export interface SegmentedControlProps<TValue extends string> {
  readonly value: TValue;
  readonly options: readonly SegmentedControlOption<TValue>[];
  readonly onChange: (value: TValue) => void;
  readonly label: string;
  readonly className?: string;
}

export function SegmentedControl<TValue extends string>({
  className,
  label,
  onChange,
  options,
  value
}: SegmentedControlProps<TValue>) {
  return (
    <div
      role="group"
      aria-label={label}
      className={cn('inline-flex rounded-2xl border border-border/70 bg-surface/65 p-1', className)}
    >
      {options.map((option) => {
        const selected = option.value === value;

        return (
          <button
            key={option.value}
            type="button"
            aria-pressed={selected}
            aria-label={option.ariaLabel ?? option.label}
            onClick={() => onChange(option.value)}
            className={cn(
              'interactive-ring inline-flex min-h-9 items-center justify-center gap-2 rounded-xl px-3 text-xs font-semibold text-muted transition duration-200 hover:text-foreground',
              selected && 'bg-elevated text-foreground shadow-sm',
            )}
          >
            {option.icon}
            {option.label}
          </button>
        );
      })}
    </div>
  );
}