import React from 'react';

interface IndicatorDotsProps {
  /** 전체 인디케이터(dot)의 개수 */
  count: number;

  /** 현재 활성화된 인디케이터의 인덱스 */
  activeIndex: number;

  /** 인디케이터(dot)를 클릭했을 때 호출되는 콜백 함수 */
  onClick: (index: number) => void;

  /** 인디케이터를 감싸는 최상위 div의 추가 클래스명 */
  className?: string;

  /** 선택된 dot의 배경색 클래스 */
  activeColorClass?: string;

  /** 선택되지 않은 dot의 배경색 클래스 */
  inactiveColorClass?: string;
}

const IndicatorDots: React.FC<IndicatorDotsProps> = ({
                                                       count,
                                                       activeIndex,
                                                       onClick,
                                                       className = '',
                                                       activeColorClass = 'bg-white',
                                                       inactiveColorClass = 'bg-white/50',
                                                     }) => {
  return (
    <div className={`inline-flex gap-2 ${className}`}>
      {Array.from({ length: count }).map((_, index) => (
        <div
          key={index}
          onClick={() => onClick(index)}
          className={`w-2 h-2 relative select-none ${
            index === activeIndex ? activeColorClass : inactiveColorClass
          } rounded cursor-pointer`}
        />
      ))}
    </div>
  );
};

export default IndicatorDots;
