import type { ReactNode } from 'react';

interface PillToggleProps {
  label: string;
  active: boolean;
  onClick: () => void;
  icon?: ReactNode;
  /** Visual hint for partial selection (e.g. some children selected) */
  indeterminate?: boolean;
  size?: 'sm' | 'xs';
}

export function PillToggle({
  label,
  active,
  onClick,
  icon,
  indeterminate,
  size = 'sm',
}: PillToggleProps) {
  const sizeClasses = size === 'xs' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm';

  const colorClasses = active
    ? 'bg-teal-600 text-white dark:bg-teal-500'
    : indeterminate
      ? 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300'
      : 'bg-warm-100 text-warm-600 hover:bg-warm-200 dark:bg-warm-700 dark:text-warm-300 dark:hover:bg-warm-600';

  return (
    <button
      type="button"
      onClick={onClick}
      aria-pressed={indeterminate ? 'mixed' : active}
      className={`${sizeClasses} ${colorClasses} inline-flex max-w-full shrink-0 items-center gap-1.5 rounded-full font-medium whitespace-nowrap cursor-pointer`}
    >
      {icon}
      <span className="block min-w-0 truncate">{label}</span>
    </button>
  );
}
