import type { ReactNode } from 'react';

interface PillGroupProps {
  children: ReactNode;
  className?: string;
  wrap?: boolean;
}

export function PillGroup({ children, className = '', wrap = false }: PillGroupProps) {
  return (
    <div
      className={`flex min-w-0 max-w-full gap-1.5 ${
        wrap
          ? 'flex-wrap overflow-x-visible'
          : 'flex-nowrap overflow-x-auto overscroll-x-contain touch-pan-x touch-pan-y scrollbar-hide md:flex-wrap md:overflow-x-visible'
      } ${className}`}
    >
      {children}
    </div>
  );
}
