import type { ReactNode } from 'react';

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

/**
 * Chip-row action group used on detail-page headers. On mobile (`< sm`), the
 * row scrolls horizontally with snap-x, no overflow clipping. On desktop, it
 * wraps freely.
 */
export function ActionRow({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <div
      className={cn(
        'flex gap-2',
        'overflow-x-auto snap-x snap-mandatory scroll-smooth -mx-3 px-3 sm:mx-0 sm:px-0',
        'sm:flex-wrap sm:overflow-visible',
        '[&>*]:snap-start [&>*]:shrink-0 sm:[&>*]:snap-none',
        className,
      )}
    >
      {children}
    </div>
  );
}