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

const GAP_MAP = {
  sm: 'gap-0.5',
  md: 'gap-1',
  lg: 'gap-2',
} as const;

const SCROLL_UNTIL_MAP = {
  sm: 'sm:overflow-visible',
  md: 'md:overflow-visible',
  lg: 'lg:overflow-visible',
  xl: 'xl:overflow-visible',
} as const;

interface ScrollableButtonGroupProps {
  children: ReactNode;
  /** 버튼 간격 (default: 'md') */
  gap?: keyof typeof GAP_MAP;
  /** 이 breakpoint 이상에서 스크롤 해제 (default: 'xl') */
  scrollUntil?: keyof typeof SCROLL_UNTIL_MAP;
  className?: string;
}

/**
 * 가로 스크롤 버튼 컨테이너
 *
 * 좁은 화면에서 overflow-x-auto + 히든 스크롤바,
 * scrollUntil breakpoint 이상에서 일반 레이아웃 전환.
 */
export function ScrollableButtonGroup({
  children,
  gap = 'md',
  scrollUntil = 'xl',
  className,
}: ScrollableButtonGroupProps) {
  return (
    <div
      className={cn(
        'overflow-x-auto min-w-0',
        SCROLL_UNTIL_MAP[scrollUntil],
        className,
      )}
      style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
    >
      <div className={cn('flex items-center min-w-max [&::-webkit-scrollbar]:hidden', GAP_MAP[gap])}>
        {children}
      </div>
    </div>
  );
}
